Feat/북마크 등록 카테고리 DropBox 추가

src/apis/bookmark.ts

@@ -1,12 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import useAuthStore from '@/stores/authStore';
-import {
-  InfiniteData,
-  useInfiniteQuery,
-  useMutation,
-  useQuery,
-  useQueryClient,
-} from '@tanstack/react-query';
+import { InfiniteData, useInfiniteQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import axios, { AxiosError, AxiosResponse } from 'axios';
 import { fetchData } from '.';
 import { default as apis, urlParams } from './api';
@@ -113,10 +107,17 @@ export const useSaveBookmark = () => {
 
   return useMutation<AxiosResponse, AxiosError, ISaveBookmarkDataType>({
     mutationFn: (data) => fetchData.post(url, data),
-    onSuccess: () =>
-      queryClient.invalidateQueries({
+    onSuccess: () => {
+      // 북마크 리스트 리패치
+      queryClient.removeQueries({
         queryKey: [apis.bookmark.bookmark_list],
-      }),
+      });
+
+      // 카테고리 리스트 리패치
+      queryClient.removeQueries({
+        queryKey: [apis.category.category_list],
+      });
+    },
   });
 };
 
@@ -164,22 +165,6 @@ export const fetchUploadImage = async (formData: FormData) => {
   return;
 };
 
-/**
- * 북마크 이미지 쌈네일
- */
-export const useGetThumbnailImage = (uuid?: string) => {
-  const url = apis.fileUpload.thumbnail(uuid ?? '');
-
-  return useQuery<AxiosResponse, AxiosError, any>({
-    queryKey: [url],
-    queryFn: () => fetchData.get(url),
-    select: (res) => res.data.result,
-    staleTime: 1000 * 60 * 60,
-    gcTime: 1000 * 60 * 60,
-    enabled: !!uuid,
-  });
-};
-
 interface BookmarkLikeDataType {
   bookMarkId: number;
   isFavorite: boolean;

src/components/BookmarkCard/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useBookmarkLike, useGetThumbnailImage } from '@/apis/bookmark';
+import { useBookmarkLike } from '@/apis/bookmark';
 import { cn } from '@/lib/utils';
 import useToastStore from '@/stores/toastStore';
 import { MouseEvent, useState } from 'react';
@@ -38,7 +38,9 @@ const BookmarkCard = ({
   const { addToast } = useToastStore();
 
   // 썸네일 API 요청
-  useGetThumbnailImage(imageUUID);
+  // const path = apis.fileUpload.thumbnail(imageUUID ?? '');
+
+  const SEVER_URL = process.env.NEXT_PUBLIC_SERVER_URL;
 
   const { mutateAsync: mutateBookmarkLike } = useBookmarkLike();
   const [isLike, setIsLike] = useState(isFavorite);
@@ -80,14 +82,24 @@ const BookmarkCard = ({
           'group-hover:shadow-layer group-hover:-translate-y-8 transition-all duration-200',
         ])}
       >
-        {representImageUrl ? (
+        {imageUUID ? (
+          // 등록한 썸네일 이미지
+          <img
+            className='aspect-[296/180] object-cover'
+            src={`${SEVER_URL}/file/original/${imageUUID}`}
+            alt='썸네일'
+            width={650}
+          />
+        ) : representImageUrl ? (
+          // url 썸네일 이미지
           <img
             className='aspect-[296/180] object-cover'
             src={representImageUrl}
             alt='썸네일'
             width={650}
           />
         ) : (
+          // Default 이미지
           <img
             className='aspect-[296/180] object-cover'
             src={`/assets/image/empty_image_${getRandomNumber()}.png`}

src/components/common/Check/Check.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
+import { ChangeEvent, useState } from 'react';
 import Check from '.';
 import { Button } from '../Button';
 
@@ -43,7 +43,9 @@ export const Controlled_Checkbox: Story = {
   render: (args) => {
     const [checked, setChecked] = useState(false);
 
-    const handleChangeChecked = (checked: boolean) => {
+    const handleChangeChecked = (e: ChangeEvent<HTMLInputElement>) => {
+      const checked = e.target.checked;
+
       setChecked(checked);
     };
 

src/components/common/Check/index.tsx

@@ -5,11 +5,18 @@ import Icon from '../Icon';
 export interface ICheck {
   name?: string;
   checked?: boolean;
-  onChange?: (checked: boolean) => void;
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
   defaultChecked?: boolean;
+  value?: string | number;
 }
 
-const Check = ({ name, checked: controlledChecked, onChange, defaultChecked = false }: ICheck) => {
+const Check = ({
+  name,
+  checked: controlledChecked,
+  onChange,
+  defaultChecked = false,
+  value,
+}: ICheck) => {
   const isControlled = !!controlledChecked;
   const [checked, setChecked] = useState(defaultChecked);
 
@@ -19,7 +26,7 @@ const Check = ({ name, checked: controlledChecked, onChange, defaultChecked = fa
     if (!isControlled) {
       setChecked(checked);
     }
-    onChange?.(checked);
+    onChange?.(e);
   };
 
   const isChecked = isControlled ? controlledChecked : checked;
@@ -35,7 +42,14 @@ const Check = ({ name, checked: controlledChecked, onChange, defaultChecked = fa
         >
           {isChecked && <Icon name='checkOn_f' className='text-icon-on w-16 h-16' />}
         </div>
-        <input name={name} type='checkbox' checked={isChecked} onChange={handleOnChange} hidden />
+        <input
+          name={name}
+          type='checkbox'
+          checked={isChecked}
+          onChange={handleOnChange}
+          hidden
+          value={value}
+        />
       </label>
     </div>
   );

src/components/common/Modal/ModalLayout.tsx

@@ -19,7 +19,7 @@ const ModalLayout = ({ children }: IModal) => {
   return (
     <div
       ref={modalRef}
-      className='fixed top-0 left-0 bottom-0 right-0 p-40 flex flex-col justify-center items-center'
+      className='fixed top-0 left-0 bottom-0 right-0 p-40 flex flex-col justify-center items-center bg-[#E2E5E9B2]'
       onClick={handleCloseModal}
     >
       <div className='max-h-[900px] p-24 rounded-2xl bg-surface shadow-modal overflow-scroll hide-scroll'>