Merge pull request #100 from Chaellimi/hotfix/#99

Jamkris · web-flow · commit 3c8732513541 · 2025-07-21T07:46:22.000+09:00
[hotfix/#99] 발표전 여러 에러 수정
diff --git a/src/app/(admin)/admin/inventory/page.tsx b/src/app/(admin)/admin/inventory/page.tsx
@@ -248,7 +248,7 @@ const InventoryManagement = () => {
 
                   <div className="flex items-center justify-between mb-3">
                     <span className="text-lg font-bold text-gray-900">
-                      {inventoryData.product.price}P
+                      {Number(inventoryData.product.price).toLocaleString()}P
                     </span>
                     <span className="px-2 py-1 text-xs text-gray-700 bg-gray-100 rounded-full">
                       {inventoryData.product.category}
diff --git a/src/app/(admin)/admin/product/page.tsx b/src/app/(admin)/admin/product/page.tsx
@@ -270,7 +270,7 @@ const ProductManagement = () => {
 
                   <div className="flex items-center justify-between mb-3">
                     <span className="text-lg font-bold text-gray-900">
-                      {product.price}P
+                      {Number(product.price).toLocaleString()}P
                     </span>
                     <span className="px-2 py-1 text-xs text-gray-700 bg-gray-100 rounded-full">
                       {product.category}
@@ -352,7 +352,9 @@ const ProductManagement = () => {
                     <label className="block text-sm font-medium text-gray-700">
                       가격
                     </label>
-                    <p className="text-gray-900">{selectedProduct.price}P</p>
+                    <p className="text-gray-900">
+                      {Number(selectedProduct.price).toLocaleString()}P
+                    </p>
                   </div>
                   <div>
                     <label className="block text-sm font-medium text-gray-700">
diff --git a/src/app/(private)/challenge/[id]/page.tsx b/src/app/(private)/challenge/[id]/page.tsx
@@ -30,6 +30,7 @@ import {
 import { ChallengeWriteType } from '@/types/Challenge';
 import { useGetUserRole } from '@/service/shared/shared.query';
 import useShareBridge from '@/lib/hooks/useShareBridge';
+import { useBookmark } from '@/hooks/useBookmark';
 
 interface recentChallengesType {
   id: number;
@@ -51,7 +52,6 @@ const ChallengeSingle = () => {
   const backPath = useSearchParams().get('back');
 
   const [actionSheet, setActionSheet] = useState(false);
-  const [isBookmarked, setIsBookmarked] = useState(false);
   const [isOpenConfirmModal, setIsOpenConfirmModal] = useState(false);
   const [isOpenDeleteModal, setIsOpenDeleteModal] = useState(false);
   const [isOpenRefusalModal, setIsOpenRefusalModal] = useState(false);
@@ -67,6 +67,7 @@ const ChallengeSingle = () => {
       recentChallenges: recentChallengesType[];
       totalChallenges: number;
       joinStatus: string;
+      isBookmarked: boolean;
     };
   };
 
@@ -77,6 +78,16 @@ const ChallengeSingle = () => {
   const recentChallenges = challengeData?.recentChallenges ?? [];
   const totalChallenges = challengeData?.totalChallenges ?? [];
   const isJoinedChallenge = challengeData?.joinStatus ?? false;
+  const isBookmarkedData = challengeData?.isBookmarked ?? false;
+
+  const {
+    isBookmarked,
+    toggleBookmark,
+    isLoading: isBookmarkLoading,
+  } = useBookmark({
+    challengeId: id ? Number(id) : 0,
+    initialBookmarkState: isBookmarkedData,
+  });
 
   useStatusBarBridge(
     {
@@ -346,8 +357,9 @@ const ChallengeSingle = () => {
       <div className="flex items-center justify-center w-full h-16 gap-4 px-6 pt-3 border-t bg-gray-white border-gray-50 custom601:mb-6">
         <div
           onClick={() => {
-            setIsBookmarked(!isBookmarked);
+            toggleBookmark();
           }}
+          className={`cursor-pointer ${isBookmarkLoading ? 'opacity-50 pointer-events-none' : ''}`}
         >
           <BookmarkIcon
             width="24"
diff --git a/src/app/(private)/challenge/[id]/progress/page.tsx b/src/app/(private)/challenge/[id]/progress/page.tsx
@@ -138,7 +138,7 @@ const Progress = () => {
                 <div className="grid grid-cols-3 gap-y-4 gap-x-2 justify-items-center">
                   {progressDates.map((dateStr, index) => {
                     const today = dayjs().format('YYYY-MM-DD');
-                    const isFeature = new Date(dateStr) <= new Date(today);
+                    const isFeature = new Date(dateStr) < new Date(today);
                     const isCertified = certifiedSet.has(dateStr);
 
                     return (
@@ -193,7 +193,9 @@ const Progress = () => {
           <div className="text-gray-black text-b2">적립내역</div>
 
           {progressLog?.pointSavingLog.length === 0 ? (
-            <div> 이건 뜨면 안됨... </div>
+            <div className="flex items-center justify-center w-full h-48">
+              적립금 내역이 없습니다.
+            </div>
           ) : (
             <div className="flex flex-col">
               {progressLog?.pointSavingLog.map((item: pointSavingLogType) => (
diff --git a/src/app/(private)/challenge/page.tsx b/src/app/(private)/challenge/page.tsx
@@ -8,6 +8,8 @@ import ChallengeContent from '@/components/Challenge/ChallengeContent';
 import Header from '@/components/shared/Header';
 import { ChallengeType, ChallengeFilter } from '@/types/Challenge';
 import { useGetChallenge } from '@/service/Challenge/challenge.query';
+import { useGetBookmarkList } from '@/service/shared/shared.query';
+import { useBookmark } from '@/hooks/useBookmark';
 import Loading from '@/components/shared/Loading';
 
 const challengeCategories = [
@@ -75,6 +77,43 @@ const Challenge = () => {
   };
 
   const { data: ChallengeData, isPending } = useGetChallenge(filterParams);
+  const { data: bookmarkData } = useGetBookmarkList();
+
+  // 북마크된 챌린지 ID들을 배열로 저장
+  const bookmarkedChallengeIds =
+    bookmarkData?.data?.map(
+      (bookmark: { challengeId: number }) => bookmark.challengeId
+    ) || [];
+
+  // 개별 챌린지의 북마크 기능을 위한 컴포넌트
+  const ChallengeWithBookmark = ({
+    challenge,
+  }: {
+    challenge: ChallengeType;
+  }) => {
+    const isInitiallyBookmarked = bookmarkedChallengeIds.includes(challenge.id);
+    const { isBookmarked, toggleBookmark, isLoading } = useBookmark({
+      challengeId: challenge.id,
+      initialBookmarkState: isInitiallyBookmarked,
+    });
+
+    return (
+      <ChallengeContent
+        key={challenge.id}
+        id={challenge.id}
+        count={challenge.participantCount}
+        title={challenge.title}
+        imgUrl={challenge.imgURL}
+        days={Number(challenge.day)}
+        difficulty={challenge.difficulty}
+        createrName={challenge.User.name}
+        createrImgUrl={challenge.User.profileImg}
+        isChecked={isBookmarked}
+        onClickBookmark={toggleBookmark}
+        isBookmarkLoading={isLoading}
+      />
+    );
+  };
 
   const hasActiveFilters = Object.values(filters).some(
     (v) => v !== '전체' && v !== '인기순'
@@ -156,17 +195,7 @@ const Challenge = () => {
       <div className="flex-1 h-0 min-h-0 px-8 pb-16 mt-2 overflow-y-scroll scrollbar-hide -webkit-overflow-scrolling-touch overscroll-contain">
         <div className="grid grid-cols-2 gap-x-5 gap-y-5">
           {ChallengeData?.data?.challenges?.map((item: ChallengeType) => (
-            <ChallengeContent
-              key={item.id}
-              id={item.id}
-              count={item.participantCount}
-              title={item.title}
-              imgUrl={item.imgURL}
-              days={Number(item.day)}
-              difficulty={item.difficulty}
-              createrName={item.User.name}
-              createrImgUrl={item.User.profileImg}
-            />
+            <ChallengeWithBookmark key={item.id} challenge={item} />
           ))}
         </div>
       </div>
diff --git a/src/app/api/challenge/[id]/route.ts b/src/app/api/challenge/[id]/route.ts
@@ -4,7 +4,12 @@ import { NextRequest } from 'next/server';
 import { Op, fn, col } from 'sequelize';
 import resUtil from '@/lib/utils/responseUtil';
 import getUserFromRequest from '@/lib/utils/getUserFromRequest';
-import { Challenge, ChallengeParticipants, Users } from '@/database/models';
+import {
+  Bookmark,
+  Challenge,
+  ChallengeParticipants,
+  Users,
+} from '@/database/models';
 
 async function getHandler(req: NextRequest) {
   try {
@@ -82,6 +87,18 @@ async function getHandler(req: NextRequest) {
       }
     }
 
+    let isBookmarked = false;
+    if (loginUser) {
+      isBookmarked = (await Bookmark.findOne({
+        where: {
+          userId: loginUser.id,
+          challengeId,
+        },
+      }))
+        ? true
+        : false;
+    }
+
     return resUtil.successTrue({
       status: 200,
       message: '챌린지 조회 성공',
@@ -90,6 +107,7 @@ async function getHandler(req: NextRequest) {
         totalChallenges,
         recentChallenges,
         joinStatus,
+        isBookmarked,
       },
     });
   } catch (err) {
diff --git a/src/components/Challenge/ChallengeContent.tsx b/src/components/Challenge/ChallengeContent.tsx
@@ -14,6 +14,7 @@ interface OwnProps {
   days: number;
   isChecked?: boolean;
   onClickBookmark?: () => void;
+  isBookmarkLoading?: boolean;
   link?: string;
 }
 
@@ -28,6 +29,7 @@ const ChallengeContent = ({
   days,
   isChecked = false,
   onClickBookmark,
+  isBookmarkLoading = false,
   link = `/challenge/${id}`,
 }: OwnProps) => {
   return (
@@ -43,14 +45,15 @@ const ChallengeContent = ({
         >
           <div className="flex flex-col justify-between h-full w-full px-[0.66rem] py-2">
             <button
-              className="flex justify-end w-full"
+              className={`flex justify-end w-full ${isBookmarkLoading ? 'opacity-50 pointer-events-none' : ''}`}
               onClick={(e) => {
                 e.stopPropagation();
                 e.preventDefault();
-                if (onClickBookmark) {
+                if (onClickBookmark && !isBookmarkLoading) {
                   onClickBookmark();
                 }
               }}
+              disabled={isBookmarkLoading}
             >
               <BookmarkIcon isChecked={isChecked && isChecked} />
             </button>
diff --git a/src/hooks/useBookmark.ts b/src/hooks/useBookmark.ts
@@ -0,0 +1,50 @@
+import { useState, useEffect } from 'react';
+import { usePostBookmarkUpdate } from '@/service/shared/shared.query';
+import { useQueryClient } from '@tanstack/react-query';
+import { sharedKeys } from '@/service/shared/shared.key';
+
+interface UseBookmarkProps {
+  challengeId: number;
+  initialBookmarkState?: boolean;
+}
+
+export const useBookmark = ({
+  challengeId,
+  initialBookmarkState = false,
+}: UseBookmarkProps) => {
+  const [isBookmarked, setIsBookmarked] = useState(initialBookmarkState);
+  const queryClient = useQueryClient();
+  const bookmarkMutation = usePostBookmarkUpdate();
+
+  // 초기 북마크 상태가 변경되면 로컬 상태도 업데이트
+  useEffect(() => {
+    setIsBookmarked(initialBookmarkState);
+  }, [initialBookmarkState]);
+
+  const toggleBookmark = async () => {
+    // 낙관적 업데이트: UI를 즉시 변경
+    const previousState = isBookmarked;
+    setIsBookmarked(!isBookmarked);
+
+    try {
+      await bookmarkMutation.mutateAsync(challengeId);
+
+      // 성공 시 북마크 리스트 다시 가져오기
+      queryClient.invalidateQueries({
+        queryKey: [sharedKeys.useGetBookmarkList],
+      });
+    } catch (error) {
+      // 실패 시 이전 상태로 롤백
+      setIsBookmarked(previousState);
+      console.error('북마크 업데이트 실패:', error);
+      // 사용자에게 에러 알림 (선택사항)
+      alert('북마크 업데이트에 실패했습니다. 다시 시도해주세요.');
+    }
+  };
+
+  return {
+    isBookmarked,
+    toggleBookmark,
+    isLoading: bookmarkMutation.isPending,
+  };
+};
diff --git a/src/service/Admin/admin.api.ts b/src/service/Admin/admin.api.ts
@@ -18,7 +18,7 @@ const editAdminUser = async (userData: {
   role: string;
   profileImg?: string;
 }) => {
-  const { data } = await axios.post('/api/admin/users/edit', userData);
+  const { data } = await axios.put('/api/admin/users', userData);
   return data;
 };
 
diff --git a/src/service/shared/shared.query.ts b/src/service/shared/shared.query.ts
@@ -28,3 +28,15 @@ export const usePostUploadImg = () => {
     mutationFn: API.postUploadImg,
   });
 };
+
+export const usePostBookmarkUpdate = () => {
+  return useMutation({
+    mutationFn: API.postBookmarkUpdate,
+  });
+};
+
+export const useLogoutUser = () => {
+  return useMutation({
+    mutationFn: API.logoutUser,
+  });
+};
