Merge pull request #187 from PNUops/feat/remain-like-count

feat: 남은 좋아요 개수 표현 툴팁 구현

Author: Heo-Donghyuk

src/apis/projectViewer.ts

@@ -8,6 +8,7 @@ import {
   CommentEditRequestDto,
   CommentDto,
   PreviewResult,
+  LikeUpdateResponseDto,
 } from 'types/DTO/projectViewerDto';
 
 export const getProjectDetails = async (teamId: number): Promise<ProjectDetailsResponseDto> => {
@@ -43,7 +44,7 @@ export const getPreviewImages = async (teamId: number, imageIds: number[]): Prom
   return { imageResults };
 };
 
-export const patchLikeToggle = async (request: LikeUpdateRequestDto) => {
+export const patchLikeToggle = async (request: LikeUpdateRequestDto): Promise<LikeUpdateResponseDto> => {
   const { teamId, isLiked } = request;
   const response = await apiClient.patch(`/teams/${teamId}/like`, { isLiked });
   return response.data;

src/pages/project-viewer/LikeSection.tsx

@@ -19,15 +19,28 @@ const LikeSection = ({ contestId, teamId, isLiked }: LikeSectionProps) => {
   const navigate = useNavigate();
   const toast = useToast();
 
+  const [showLikeCountTooltip, setShowLikeCountTooltip] = useState(false);
+  const [likeCount, setLikeCount] = useState<number | null>(null);
+  const handleLikeCountTooltip = (likeCount: number) => {
+    setLikeCount(likeCount);
+    setShowLikeCountTooltip(true);
+    setTimeout(() => setShowLikeCountTooltip(false), 2000);
+  };
+
   const queryClient = useQueryClient();
   const { user } = useAuth();
   const likeMutation = useMutation({
     mutationFn: (nextIsLiked: boolean) => patchLikeToggle({ teamId, isLiked: nextIsLiked }),
-    onSuccess: () => {
+    onSuccess: (res) => {
       queryClient.invalidateQueries({ queryKey: ['projectDetails', teamId] });
       queryClient.invalidateQueries({ queryKey: ['teams', 'current', user?.id ?? 'guest'] });
       queryClient.invalidateQueries({ queryKey: ['teams', contestId, user?.id ?? 'guest'] });
       toast(!isLiked ? '좋아요를 눌렀어요' : '좋아요를 취소했어요');
+
+      handleLikeCountTooltip(res.remainingLikeCount);
+    },
+    onError: (err: any) => {
+      toast(err.response.data.message ?? '요청에 실패했어요', 'error');
     },
   });
 
@@ -42,16 +55,18 @@ const LikeSection = ({ contestId, teamId, isLiked }: LikeSectionProps) => {
 
   return (
     <LikeAbuseToolTip>
-      <button
-        onClick={handleClick}
-        disabled={likeMutation.isPending}
-        className={`${
-          isLiked ? 'bg-mainGreen text-white hover:bg-emerald-600' : 'bg-lightGray text-white hover:bg-gray-300'
-        } relative flex cursor-pointer items-center gap-5 justify-self-center rounded-full p-4 text-sm sm:px-8 sm:py-3`}
-      >
-        <FaHeart className={`${isLiked ? 'text-white' : 'text-whiteGray'}`} size={20} />
-        <span className="hidden sm:inline">좋아요</span>
-      </button>
+      <LikeCountToolTip isOpen={showLikeCountTooltip} likeCount={likeCount}>
+        <button
+          onClick={handleClick}
+          disabled={likeMutation.isPending}
+          className={`${
+            isLiked ? 'bg-mainGreen text-white hover:bg-emerald-600' : 'bg-lightGray text-white hover:bg-gray-300'
+          } relative flex cursor-pointer items-center gap-5 justify-self-center rounded-full p-4 text-sm sm:px-8 sm:py-3`}
+        >
+          <FaHeart className={`${isLiked ? 'text-white' : 'text-whiteGray'}`} size={20} />
+          <span className="hidden sm:inline">좋아요</span>
+        </button>
+      </LikeCountToolTip>
     </LikeAbuseToolTip>
   );
 };
@@ -94,3 +109,26 @@ const LikeAbuseToolTip = ({ children }: { children: ReactNode }) => {
     </div>
   );
 };
+const LikeCountToolTip = ({
+  isOpen,
+  likeCount,
+  children,
+}: {
+  isOpen: boolean;
+  likeCount: number | null;
+  children: ReactNode;
+}) => {
+  return (
+    <Tooltip open={isOpen && likeCount !== null}>
+      <TooltipTrigger className="z-50 rounded-lg bg-white p-2">{children}</TooltipTrigger>
+      <TooltipContent className="max-w-3xs duration-100">
+        <div className="flex flex-col gap-2 p-2 text-base">
+          <p className="break-keep">
+            <span>{'남은 좋아요 '}</span>
+            <strong className="text-mainBlue font-semibold">{`${likeCount}개`}</strong>
+          </p>
+        </div>
+      </TooltipContent>
+    </Tooltip>
+  );
+};

src/types/DTO/projectViewerDto.ts

@@ -66,6 +66,13 @@ export interface LikeUpdateRequestDto {
   teamId: number;
   isLiked: boolean;
 }
+export interface LikeUpdateResponseDto {
+  teamId: number;
+  isLiked: boolean;
+  message: string;
+  remainingLikeCount: number;
+  maxLikeCount: number;
+}
 
 export interface PreviewImage {
   id?: number;