fix: 찜하기 오류 수정

package.json

@@ -91,5 +91,5 @@
 		"vite": "^5.0.8",
 		"vitest": "^1.2.1"
 	},
-	"packageManager": "yarn@4.0.2"
+	"packageManager": "yarn@3.8.1"
 }

src/apis/index.ts

@@ -1,15 +1,14 @@
-import axios, {
-	AxiosError,
-	AxiosResponse,
-	InternalAxiosRequestConfig,
-} from 'axios';
-
 import { ApiResponse } from '@type/apiResponse';
 import {
 	getAccessToken,
 	renewAccessToken,
 	renewRefreshToken,
 } from '@utils/localStorage/token';
+import axios, {
+	AxiosError,
+	AxiosResponse,
+	InternalAxiosRequestConfig,
+} from 'axios';
 
 export const api = axios.create({
 	baseURL: import.meta.env.VITE_BASE_URL,

src/components/atoms/BuyWithLikeButton.tsx

@@ -1,10 +1,9 @@
-import { Button } from 'konsta/react';
-
 import { HeartButton } from '@components/atoms';
 import { useGetAccountInfo } from '@hooks/apis/account';
 import { useBuyButtonStore } from '@stores/buyButtonStore';
 import { useBottomSheetStore } from '@stores/layerStore';
 import isLogin from '@utils/isLogin';
+import { Button } from 'konsta/react';
 import { useNavigate } from 'react-router-dom';
 
 type LikeButtonProps = {

src/components/atoms/ImageSlider.tsx

@@ -1,6 +1,5 @@
-import { ReactNode, useState } from 'react';
-
 import { IndexIndicator } from '@components/atoms';
+import { ReactNode, useState } from 'react';
 import Slider from 'react-slick';
 
 import '@styles/slick.css';

src/components/atoms/ImageUploadButton.tsx

@@ -1,9 +1,8 @@
-import { useCallback, useRef } from 'react';
-
 import { SvgIcon } from '@components/common';
 import colors from '@constants/colors';
 import { usePostImageUpload } from '@hooks/apis/imageUpload';
 import { useQueryClient } from '@tanstack/react-query';
+import { useCallback, useRef } from 'react';
 
 const ImageUploadButton = () => {
 	const inputRef = useRef<HTMLInputElement | null>(null);

src/components/atoms/ListPoint.tsx

@@ -1,11 +1,10 @@
-import { Block, Button } from 'konsta/react';
-
 import { SvgIcon } from '@components/common';
 import colors from '@constants/colors';
 import koRefundStatus from '@constants/koRefundStatus';
 import { PointHistory } from '@models/point/entity/point';
 import { KoRefundStatus } from '@type/refundStatus';
 import { getDataInYYYYMMDDSplitedByDot, getPointText } from '@utils/formatData';
+import { Block, Button } from 'konsta/react';
 import { useNavigate } from 'react-router-dom';
 
 type ListPointProps = PointHistory;

src/components/atoms/Modal.tsx

@@ -1,5 +1,3 @@
-import { ReactNode } from 'react';
-
 import {
 	Dialog,
 	DialogContent,
@@ -10,6 +8,7 @@ import {
 	DialogFooter,
 } from '@components/ui/dialog';
 import { useModalStore } from '@stores/layerStore';
+import { ReactNode } from 'react';
 
 export type ModalProps = {
 	title: string;

src/components/atoms/SearchTextField.tsx

@@ -1,9 +1,8 @@
-import { useState, KeyboardEvent, useEffect } from 'react';
-
 import { IconButton } from '@components/atoms';
 import { SvgIcon } from '@components/common';
 import colors from '@constants/colors';
 import { useSearchHistoryStore } from '@stores/searchHistoryStore';
+import { useState, KeyboardEvent, useEffect } from 'react';
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 
 type SearchTextFieldProps = {

src/components/atoms/ToastMessageLikeOrDelete.tsx

@@ -1,7 +1,6 @@
-import { Button } from 'konsta/react';
-
 import { SvgIcon } from '@components/common';
 import colors from '@constants/colors';
+import { Button } from 'konsta/react';
 import toast from 'react-hot-toast';
 import { useNavigate } from 'react-router-dom';
 

src/components/atoms/button/DefaultButton.tsx

@@ -1,11 +1,10 @@
-import { Button } from 'konsta/react';
-
 import { SvgIcon } from '@components/common';
 import dynamicBorderColor from '@constants/dynamicTailwind/dynamicBorderColor';
 import dynamicKColor from '@constants/dynamicTailwind/dynamicKColor';
 import dynamicTextColor from '@constants/dynamicTailwind/dynamicTextColor';
 import ColorKey from '@type/colorKey';
 import svgIcon from '@type/svgIcon';
+import { Button } from 'konsta/react';
 
 type DefaultButtonProps = {
 	icon?: svgIcon;

src/components/atoms/button/HeartButton.tsx

@@ -1,9 +1,8 @@
-import { useEffect, useState } from 'react';
-
 import { IconButton, ToastMessageLikeOrDelete } from '@components/index';
 import { useDeleteWishItem, usePostWishItem } from '@hooks/apis/wishList';
 import { useBottomSheetStore } from '@stores/layerStore';
 import isLogin from '@utils/isLogin';
+import { useEffect, useState } from 'react';
 import toast from 'react-hot-toast';
 
 type HeartButtonProps = {

src/components/atoms/button/IconButton.tsx

@@ -1,7 +1,6 @@
-import { Button } from 'konsta/react';
-
 import { SvgIcon } from '@components/common';
 import svgIcon from '@type/svgIcon';
+import { Button } from 'konsta/react';
 
 type IconButtonProps = {
 	className?: string;

src/components/atoms/button/RequestLeaveModalButton.tsx

@@ -1,7 +1,6 @@
-import { MouseEvent } from 'react';
-
 import { DefaultButton } from '@components/atoms';
 import { useModalStore } from '@stores/layerStore';
+import { MouseEvent } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 const RequestLeaveModalButton = () => {

src/components/atoms/card/ImageWithCheck.tsx

@@ -1,8 +1,7 @@
-import { useState } from 'react';
-
 import { BackdropFilter, IconButton } from '@components/atoms';
 import colors from '@constants/colors';
 import { useWishListEditStore } from '@stores/wishListStore';
+import { useState } from 'react';
 
 type ImageWithCheckProps = {
 	src: string;

src/components/atoms/form/TextField.tsx

@@ -1,12 +1,3 @@
-import { Button } from 'konsta/react';
-import {
-	useState,
-	ReactNode,
-	ChangeEvent,
-	KeyboardEvent,
-	MouseEvent,
-} from 'react';
-
 import { DefaultButton } from '@components/atoms';
 import { zodResolver } from '@hookform/resolvers/zod';
 import FixedBottomLayout from '@layouts/FixedBottomLayout';
@@ -15,6 +6,14 @@ import { useAccountInfoStore } from '@stores/formInfoStore';
 import { useBottomSheetStore } from '@stores/layerStore';
 import { FormName, FormType, SchemaType } from '@type/form';
 import { getOriginalPoint, getPointText } from '@utils/formatData';
+import { Button } from 'konsta/react';
+import {
+	useState,
+	ReactNode,
+	ChangeEvent,
+	KeyboardEvent,
+	MouseEvent,
+} from 'react';
 import {
 	useForm,
 	SubmitHandler,

src/components/atoms/myPage/BankButton.tsx

@@ -1,7 +1,6 @@
-import { Button } from 'konsta/react';
-
 import { SvgIcon } from '@components/common';
 import { IconId } from '@type/svgIcon';
+import { Button } from 'konsta/react';
 
 type BankButtonProps = {
 	iconId: IconId;

src/components/atoms/myPage/CategoryButton.tsx

@@ -1,8 +1,7 @@
-import { Button } from 'konsta/react';
-
 import { SvgIcon } from '@components/common';
 import colors from '@constants/colors';
 import { IconId } from '@type/svgIcon';
+import { Button } from 'konsta/react';
 
 type CategoryButtonProps = {
 	iconId?: IconId;

src/components/common/ProvidersTree.tsx

@@ -1,10 +1,9 @@
-import { KonstaProvider, Preloader } from 'konsta/react';
-import { Suspense } from 'react';
-
 import Error from '@pages/Error';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ComponentWithProps } from '@type/providerTree';
 import { buildProvidersTree } from '@utils/buildProvidersTree';
+import { KonstaProvider, Preloader } from 'konsta/react';
+import { Suspense } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { BrowserRouter } from 'react-router-dom';
 

src/components/molecules/point/PointHeader.tsx

@@ -1,11 +1,10 @@
-import { useEffect } from 'react';
-
 import {
 	GroupOrderTextPoint,
 	RequestVerificationButton,
 } from '@components/atoms';
 import { useGetCurrentPoint } from '@hooks/apis/point';
 import { setHeldPoint } from '@utils/localStorage/point';
+import { useEffect } from 'react';
 
 const PointHeader = () => {
 	const { data: totalPoint } = useGetCurrentPoint();

src/components/molecules/search/PreSearchHeader.tsx

@@ -1,6 +1,5 @@
-import { Button } from 'konsta/react';
-
 import { useSearchHistoryStore } from '@stores/searchHistoryStore';
+import { Button } from 'konsta/react';
 
 const PreSearchHeader = () => {
 	const handleDeleteSearchHistory = useSearchHistoryStore(

src/components/molecules/wishList/DefaultWishListHeader.tsx

@@ -1,6 +1,5 @@
-import { Button } from 'konsta/react';
-
 import { useWishListStore } from '@stores/wishListStore';
+import { Button } from 'konsta/react';
 
 const DefaultWishListHeader = () => {
 	const setWishListStatus = useWishListStore(state => state.setWishListStatus);

src/components/molecules/wishList/EditWishListHeader.tsx

@@ -1,6 +1,5 @@
-import { Button } from 'konsta/react';
-
 import { useWishListEditStore, useWishListStore } from '@stores/wishListStore';
+import { Button } from 'konsta/react';
 
 const EditWishListHeader = () => {
 	const setWishListStatus = useWishListStore(state => state.setWishListStatus);

src/components/organisms/ProductCardList.tsx

@@ -23,12 +23,12 @@ const ProductCardList = ({
 }: ProductCardListProps) => {
 	return (
 		<div className={`grid gap-4 ${classNameOfGridCols[gridCols]}`}>
-			{productList.map(({ thumbnailUrl, id, ...product }, index) => (
+			{productList.map(({ thumbnailUrl, id, ...product }) => (
 				<ProductCard
 					thumbnailUrl={thumbnailUrl}
 					size={size}
 					type={type}
-					key={`ProductCard#${index}`}
+					key={`ProductCard#${id}`}
 					id={id}
 					{...product}
 				/>

src/components/organisms/form/AccountForm.tsx

@@ -1,8 +1,7 @@
-import { useEffect } from 'react';
-
 import { Form } from '@components/atoms';
 import { useAccountInfoStore } from '@stores/formInfoStore';
 import { FormType, accountSchema } from '@type/form';
+import { useEffect } from 'react';
 
 type AccountFormProps = {
 	disabled?: boolean;

src/components/templates/search/PostSearch.tsx

@@ -1,11 +1,10 @@
-import { Preloader } from 'konsta/react';
-
 import { SearchTextField } from '@components/atoms';
 import { PostSearchHeader } from '@components/molecules';
 import { ProductCardList } from '@components/organisms';
 import { useSearch } from '@hooks/apis/search';
 import useIntersection from '@hooks/infiniteScroll';
 import { SearchQuery } from '@type/searchQuery';
+import { Preloader } from 'konsta/react';
 
 type PostSearchProps = {
 	searchQuery: SearchQuery;

src/components/templates/withdrawal/ProgressWithdrawal.tsx

@@ -1,10 +1,9 @@
-import { useEffect } from 'react';
-
 import { Form, RequestLeaveModalButton } from '@components/atoms';
 import { usePostPointWithdraw } from '@hooks/apis/point';
 import { useAccountInfoStore } from '@stores/formInfoStore';
 import { useQueryClient } from '@tanstack/react-query';
 import { FormType, pointSchema } from '@type/form';
+import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 const ProgressWithdrawal = () => {

src/components/ui/dialog.tsx

@@ -1,8 +1,7 @@
-import * as React from 'react';
-
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { cn } from '@utils/shadcn';
 import { X } from 'lucide-react';
+import * as React from 'react';
 
 const Dialog = DialogPrimitive.Root;
 

src/components/ui/drawer.tsx

@@ -1,6 +1,5 @@
-import * as React from 'react';
-
 import { cn } from '@utils/shadcn';
+import * as React from 'react';
 import { Drawer as DrawerPrimitive } from 'vaul';
 
 const Drawer = ({

src/constants/statusTag.tsx

@@ -1,7 +1,6 @@
-import { ReactNode } from 'react';
-
 import { ApprovedTag, NotApprovedTag, ProgressTag } from '@components/atoms';
 import { RefundStatus } from '@type/refundStatus';
+import { ReactNode } from 'react';
 
 type StatusValueType = {
 	[K in RefundStatus]: ReactNode;

src/layouts/PageLayout.tsx

@@ -1,7 +1,6 @@
-import { ReactNode } from 'react';
-
 import { Header } from '@components/organisms';
 import { LeftHeaderProps } from '@components/organisms/Header';
+import { ReactNode } from 'react';
 
 export type PageLayoutDefaultProps = {
 	children: ReactNode;

src/pages/Category.tsx

@@ -1,5 +1,3 @@
-import { Preloader } from 'konsta/react';
-
 import { SearchTextField } from '@components/atoms';
 import { SvgIcon } from '@components/common';
 import { ProductCardList } from '@components/organisms';
@@ -8,6 +6,7 @@ import colors from '@constants/colors';
 import { useGetProductSimpleList } from '@hooks/apis/product';
 import useIntersection from '@hooks/infiniteScroll';
 import PageLayout from '@layouts/PageLayout';
+import { Preloader } from 'konsta/react';
 import { useParams } from 'react-router-dom';
 
 type CategoryParams = {

src/pages/Error.tsx

@@ -1,8 +1,7 @@
-import { useEffect, useRef } from 'react';
-
 import { DefaultButton, SvgIcon } from '@components/index';
 import ClearLayout from '@layouts/ClearLayout';
 import FixedBottomLayout from '@layouts/FixedBottomLayout';
+import { useEffect, useRef } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 type FallbackProps = {

src/pages/Home.tsx

@@ -1,6 +1,3 @@
-import { Preloader } from 'konsta/react';
-import { useEffect } from 'react';
-
 import { SearchTextField } from '@components/atoms';
 import { CategoryButtonList } from '@components/molecules';
 import {
@@ -12,6 +9,8 @@ import { useGetProductSimpleList } from '@hooks/apis/product';
 import useIntersection from '@hooks/infiniteScroll';
 import PageLayout from '@layouts/PageLayout';
 import { setAccessToken, setRefreshToken } from '@utils/localStorage/token';
+import { Preloader } from 'konsta/react';
+import { useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
 const Home = () => {

src/pages/ImageUpload.tsx

@@ -1,10 +1,9 @@
-import { Preloader } from 'konsta/react';
-
 import { ImageUploadButton } from '@components/atoms';
 import { ImageContainer } from '@components/molecules';
 import { useGetImageUploadSimpleList } from '@hooks/apis/imageUpload';
 import useIntersection from '@hooks/infiniteScroll';
 import PageLayout from '@layouts/PageLayout';
+import { Preloader } from 'konsta/react';
 import { useNavigate } from 'react-router-dom';
 
 const ImageUpload = () => {