From 1fac6d6b141b999e58a5026c19d0c4c9180c71a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=80=E1=85=B5=E1=86=B7=E1=84=87=E1=85=A9=E1=84=80?= =?UTF-8?q?=E1=85=A7=E1=86=BC?= Date: Sun, 24 Nov 2024 17:44:37 +0900 Subject: [PATCH 1/2] =?UTF-8?q?Refactor:=20tanstack=20query=20client=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1=20=EB=A1=9C=EC=A7=81=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/interceptor/interceptor.ts | 2 +- src/api/interceptor/updateToken.ts | 2 +- src/api/orderAPI.ts | 2 +- src/api/productReviewAPI.ts | 2 +- src/api/usersAPI.ts | 2 +- .../(auth)/sign-up/_component/SignupForm.tsx | 6 ++-- src/app/community/_components/Comment.tsx | 4 +-- src/app/community/_components/PostCard.tsx | 4 +-- .../PostCardDetailModal.tsx | 6 ++-- .../community/_components/UserProfileCard.tsx | 2 +- src/app/community/page.tsx | 2 +- .../_components/navigator/CartModal.tsx | 6 ++-- .../navigator/TotalCostWithNavigation.tsx | 4 +-- src/app/event/_components/AdvertisePanel.tsx | 2 +- src/app/event/_components/Roulette.tsx | 2 +- src/app/layout.tsx | 4 +-- .../_components/Addresses/Address/Address.tsx | 2 +- .../_components/Addresses/Addresses.tsx | 2 +- .../(account)/cart/_components/CartCard.tsx | 2 +- .../(account)/coupons/_components/Coupon.tsx | 4 +-- .../OrderItemList/OrderItem/OrderItem.tsx | 2 +- .../Orders/OrderItemList/OrderItemList.tsx | 2 +- .../reviews/_components/MyReviewList.tsx | 2 +- .../reviews/_components/MyReviewProduct.tsx | 2 +- .../EditProfileModal/EditProfileModal.tsx | 6 ++-- src/app/my-info/layout.tsx | 4 +-- .../order-info/_components/OrderDetail.tsx | 4 +-- src/app/order-info/page.tsx | 2 +- .../payment/(paymentResult)/success/page.tsx | 2 +- .../_components/CheckoutForm/CheckoutForm.tsx | 2 +- .../CheckoutForm/parts/CheckoutAddress.tsx | 2 +- .../parts/CheckoutAddressModal.tsx | 2 +- .../CheckoutForm/parts/PaymentContainer.tsx | 2 +- src/app/providers.tsx | 31 +++---------------- .../_components/Product/OptionWithButtons.tsx | 2 +- .../_components/Product/ProductDetail.tsx | 2 +- .../TabContents/Review/KeywordRatios.tsx | 2 +- .../TabContents/Review/ProductReviewList.tsx | 2 +- .../AddAddressModal/AddAddressModal.tsx | 6 ++-- src/components/CustomImage/CustomImage.tsx | 2 +- src/components/CustomOption/FirstOption.tsx | 2 +- src/components/CustomOption/OptionWrapper.tsx | 2 +- src/components/CustomOption/SecondOption.tsx | 2 +- src/components/CustomOption/TooltipColor.tsx | 4 +-- src/components/Header/Header.tsx | 2 +- .../Header/HeaderParts/LogoutButton.tsx | 2 +- .../Header/HeaderParts/NotificationButton.tsx | 2 +- .../Header/HeaderParts/NotificationCard.tsx | 2 +- src/components/ItemOverview/ItemOverview.tsx | 2 +- src/components/ItemOverview/ShopOption.tsx | 2 +- src/components/ReviewItem/ReviewItem.tsx | 2 +- src/components/SearchBox/SearchBox.tsx | 2 +- src/components/SignInModal/SignInModal.tsx | 2 +- src/components/parts/Input.tsx | 2 +- src/hooks/useEventSource.ts | 2 +- src/libs/tanstackQuery/client.ts | 21 +++++++++++++ src/{libs => utils}/addEnterKeyEvent.ts | 0 src/{libs => utils}/calculateDate.ts | 0 src/{libs => utils}/changePhoneNumber.ts | 0 src/{libs => utils}/charMatcher.ts | 0 src/{libs => utils}/checkValidImage.ts | 0 src/{libs => utils}/communityPopOverOption.ts | 0 src/{libs => utils}/convertColor.ts | 0 src/{libs => utils}/convertProductCategory.ts | 0 src/{libs => utils}/fetchQueryBounding.ts | 0 src/{libs => utils}/formatBirthDate.ts | 0 .../formatCartDataToItemOverview.ts | 0 src/{libs => utils}/formatDateToKSTString.ts | 0 .../formatDateToQueryString.ts | 0 src/{libs => utils}/formatDateToString.ts | 0 src/{libs => utils}/formatKSTSDate.ts | 0 src/{libs => utils}/formatNumber.ts | 0 src/{libs => utils}/formatNumberToPrice.ts | 0 src/{libs => utils}/formatPhoneNumber.ts | 0 src/{libs => utils}/getBlurImage.ts | 0 src/{libs => utils}/getColorUpperCase.ts | 0 src/{libs => utils}/getCurrentAlarm.ts | 0 src/{libs => utils}/getCustomKeyboardPrice.ts | 0 src/{libs => utils}/getMaxKey.ts | 0 .../getOrderStatusDescriptions.ts | 0 src/{libs => utils}/getUpdatedCartData.ts | 0 src/{libs => utils}/isNumberAllowedKey.ts | 0 src/{libs => utils}/isTextOverFlow.ts | 0 src/{libs => utils}/manageCookie.ts | 0 .../renderPaymentProductName.ts | 0 src/{libs => utils}/searchParamsToObject.ts | 0 src/{libs => utils}/sortAddressesByDefault.ts | 0 src/{libs => utils}/unFormatNumber.ts | 0 src/{libs => utils}/unFormatPhoneNumber.ts | 0 src/{libs => utils}/wheelUtils.ts | 0 90 files changed, 97 insertions(+), 99 deletions(-) create mode 100644 src/libs/tanstackQuery/client.ts rename src/{libs => utils}/addEnterKeyEvent.ts (100%) rename src/{libs => utils}/calculateDate.ts (100%) rename src/{libs => utils}/changePhoneNumber.ts (100%) rename src/{libs => utils}/charMatcher.ts (100%) rename src/{libs => utils}/checkValidImage.ts (100%) rename src/{libs => utils}/communityPopOverOption.ts (100%) rename src/{libs => utils}/convertColor.ts (100%) rename src/{libs => utils}/convertProductCategory.ts (100%) rename src/{libs => utils}/fetchQueryBounding.ts (100%) rename src/{libs => utils}/formatBirthDate.ts (100%) rename src/{libs => utils}/formatCartDataToItemOverview.ts (100%) rename src/{libs => utils}/formatDateToKSTString.ts (100%) rename src/{libs => utils}/formatDateToQueryString.ts (100%) rename src/{libs => utils}/formatDateToString.ts (100%) rename src/{libs => utils}/formatKSTSDate.ts (100%) rename src/{libs => utils}/formatNumber.ts (100%) rename src/{libs => utils}/formatNumberToPrice.ts (100%) rename src/{libs => utils}/formatPhoneNumber.ts (100%) rename src/{libs => utils}/getBlurImage.ts (100%) rename src/{libs => utils}/getColorUpperCase.ts (100%) rename src/{libs => utils}/getCurrentAlarm.ts (100%) rename src/{libs => utils}/getCustomKeyboardPrice.ts (100%) rename src/{libs => utils}/getMaxKey.ts (100%) rename src/{libs => utils}/getOrderStatusDescriptions.ts (100%) rename src/{libs => utils}/getUpdatedCartData.ts (100%) rename src/{libs => utils}/isNumberAllowedKey.ts (100%) rename src/{libs => utils}/isTextOverFlow.ts (100%) rename src/{libs => utils}/manageCookie.ts (100%) rename src/{libs => utils}/renderPaymentProductName.ts (100%) rename src/{libs => utils}/searchParamsToObject.ts (100%) rename src/{libs => utils}/sortAddressesByDefault.ts (100%) rename src/{libs => utils}/unFormatNumber.ts (100%) rename src/{libs => utils}/unFormatPhoneNumber.ts (100%) rename src/{libs => utils}/wheelUtils.ts (100%) diff --git a/src/api/interceptor/interceptor.ts b/src/api/interceptor/interceptor.ts index 5c343db4..e3cf367f 100644 --- a/src/api/interceptor/interceptor.ts +++ b/src/api/interceptor/interceptor.ts @@ -1,4 +1,4 @@ -import { getCookie } from '@/libs/manageCookie'; +import { getCookie } from '@/utils/manageCookie'; import { updateToken } from './updateToken'; interface ResponseAPIType { diff --git a/src/api/interceptor/updateToken.ts b/src/api/interceptor/updateToken.ts index 636e1d65..e66b1d9e 100644 --- a/src/api/interceptor/updateToken.ts +++ b/src/api/interceptor/updateToken.ts @@ -1,6 +1,6 @@ 'use client'; -import { getCookie, setCookie } from '@/libs/manageCookie'; +import { getCookie, setCookie } from '@/utils/manageCookie'; import { emitCookieChange } from './event'; const BASE_URL = process.env.NEXT_PUBLIC_KEYDEUK_API_BASE_URL; diff --git a/src/api/orderAPI.ts b/src/api/orderAPI.ts index 5410da4e..cd9aee13 100644 --- a/src/api/orderAPI.ts +++ b/src/api/orderAPI.ts @@ -1,4 +1,4 @@ -import { formatKSTSDate } from '@/libs/formatKSTSDate'; +import { formatKSTSDate } from '@/utils/formatKSTSDate'; import type { CreateOrderAPIType, Order, OrderDetailData, OrderResponse, OrdersRequest } from '@/types/orderType'; import { FieldValues } from 'react-hook-form'; import { baseAPI } from './interceptor/interceptor'; diff --git a/src/api/productReviewAPI.ts b/src/api/productReviewAPI.ts index 615f0a97..b35a50e1 100644 --- a/src/api/productReviewAPI.ts +++ b/src/api/productReviewAPI.ts @@ -1,4 +1,4 @@ -import { formatDateToQueryString } from '@/libs/formatDateToQueryString'; +import { formatDateToQueryString } from '@/utils/formatDateToQueryString'; import type { ProductReviewParams, ProductReviewType, ReviewResponse } from '@/types/productReviewType'; import { baseAPI } from './interceptor/interceptor'; diff --git a/src/api/usersAPI.ts b/src/api/usersAPI.ts index 9a2c9f2f..aa49bb7a 100644 --- a/src/api/usersAPI.ts +++ b/src/api/usersAPI.ts @@ -1,4 +1,4 @@ -import { getCookie } from '@/libs/manageCookie'; +import { getCookie } from '@/utils/manageCookie'; import type { Users } from '@/types/userType'; import { baseAPI } from './interceptor/interceptor'; diff --git a/src/app/(auth)/sign-up/_component/SignupForm.tsx b/src/app/(auth)/sign-up/_component/SignupForm.tsx index f235b282..57c668fb 100644 --- a/src/app/(auth)/sign-up/_component/SignupForm.tsx +++ b/src/app/(auth)/sign-up/_component/SignupForm.tsx @@ -10,9 +10,9 @@ import { getCheckEmailDuplication, getCheckNicknameDuplication, postSignup } fro import { Button, InputField, RadioField } from '@/components'; import { GENDER_OPTION } from '@/constants/dropdownOptions'; import { ERROR_MESSAGE, PLACEHOLDER, REGEX } from '@/constants/signUpConstants'; -import { changePhoneNumber } from '@/libs/changePhoneNumber'; -import { formatOnInputBirthChange, unFormatBirthDate } from '@/libs/formatBirthDate'; -import { unFormatPhoneNumber } from '@/libs/unFormatPhoneNumber'; +import { changePhoneNumber } from '@/utils/changePhoneNumber'; +import { formatOnInputBirthChange, unFormatBirthDate } from '@/utils/formatBirthDate'; +import { unFormatPhoneNumber } from '@/utils/unFormatPhoneNumber'; import { CaretRightIcon, CheckboxCircleIcon } from '@/public/index'; import { QueryObserver, useQueryClient } from '@tanstack/react-query'; import { TermsAgreement } from './TermsAgreement'; diff --git a/src/app/community/_components/Comment.tsx b/src/app/community/_components/Comment.tsx index 2dcb47be..456c852f 100644 --- a/src/app/community/_components/Comment.tsx +++ b/src/app/community/_components/Comment.tsx @@ -6,11 +6,11 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'; import { toast } from 'react-toastify'; import ProfileImage from '@/components/ProfileImage/ProfileImage'; -import { calculateTimeDifference } from '@/libs/calculateDate'; +import { calculateTimeDifference } from '@/utils/calculateDate'; import type { UserDataResponseType } from '@/types/userType'; import { PopOver } from '@/components'; import { deleteComment } from '@/api/communityAPI'; -import { communityPopOverOption } from '@/libs/communityPopOverOption'; +import { communityPopOverOption } from '@/utils/communityPopOverOption'; import styles from './Comment.module.scss'; import UserProfileCard from './UserProfileCard'; diff --git a/src/app/community/_components/PostCard.tsx b/src/app/community/_components/PostCard.tsx index 77af41d8..079fc493 100644 --- a/src/app/community/_components/PostCard.tsx +++ b/src/app/community/_components/PostCard.tsx @@ -8,8 +8,8 @@ import { ErrorBoundary } from 'react-error-boundary'; import { toast } from 'react-toastify'; import { deletePostCard, getPostDetail } from '@/api/communityAPI'; -import { calculateTimeDifference } from '@/libs/calculateDate'; -import { communityPopOverOption } from '@/libs/communityPopOverOption'; +import { calculateTimeDifference } from '@/utils/calculateDate'; +import { communityPopOverOption } from '@/utils/communityPopOverOption'; import type { CommunityPostCardDataType } from '@/types/communityType'; import { Modal } from '@/components'; diff --git a/src/app/community/_components/PostCardDetailModal/PostCardDetailModal.tsx b/src/app/community/_components/PostCardDetailModal/PostCardDetailModal.tsx index d6fdc9a0..5322a8be 100644 --- a/src/app/community/_components/PostCardDetailModal/PostCardDetailModal.tsx +++ b/src/app/community/_components/PostCardDetailModal/PostCardDetailModal.tsx @@ -8,8 +8,8 @@ import { toast } from 'react-toastify'; import { deletePostCard, getCommentsInfiniteScroll, getPostDetail, postComment } from '@/api/communityAPI'; import { IMAGE_BLUR } from '@/constants/blurImage'; import { useIntersectionObserver } from '@/hooks/useIntersectionObserver'; -import { addEnterKeyEvent } from '@/libs/addEnterKeyEvent'; -import { communityPopOverOption } from '@/libs/communityPopOverOption'; +import { addEnterKeyEvent } from '@/utils/addEnterKeyEvent'; +import { communityPopOverOption } from '@/utils/communityPopOverOption'; import { keydeukImg, SpinLoading } from '@/public/index'; import type { UserDataResponseType } from '@/types/userType'; import type { CommentType } from '@/types/communityType'; @@ -18,7 +18,7 @@ import { Button, CustomOption, InputField, Modal, ModalSkeleton } from '@/compon import Dialog from '@/components/Dialog/Dialog'; import ImageZoom from '@/components/ImageZoom/ImageZoom'; import WriteEditModal from '@/components/WriteEditModal/WriteEditModal'; -import { formatDateToKSTString } from '@/libs/formatDateToKSTString'; +import { formatDateToKSTString } from '@/utils/formatDateToKSTString'; import AuthorCard from '../AuthorCard'; import Comment from '../Comment'; import { PostInteractions } from '../PostInteractions'; diff --git a/src/app/community/_components/UserProfileCard.tsx b/src/app/community/_components/UserProfileCard.tsx index 2ddc1d70..d9866691 100644 --- a/src/app/community/_components/UserProfileCard.tsx +++ b/src/app/community/_components/UserProfileCard.tsx @@ -8,7 +8,7 @@ import Image from 'next/image'; import { getOthersInfo } from '@/api/usersAPI'; import { SpinLoading, keydeukProfileImg } from '@/public/index'; import type { Users } from '@/types/userType'; -import { formatPhoneNumber } from '@/libs/formatPhoneNumber'; +import { formatPhoneNumber } from '@/utils/formatPhoneNumber'; import styles from './UserProfileCard.module.scss'; diff --git a/src/app/community/page.tsx b/src/app/community/page.tsx index b49cd0bc..408ea9b4 100644 --- a/src/app/community/page.tsx +++ b/src/app/community/page.tsx @@ -2,7 +2,7 @@ import { getAllCommunityPost } from '@/api/communityAPI'; import Pagination from '@/components/Pagination/Pagination'; import type { CommunityParamsType, CommunityPostListResponse } from '@/types/communityType'; import { QueryClient, dehydrate, HydrationBoundary } from '@tanstack/react-query'; -import { fetchQueryBonding } from '@/libs/fetchQueryBounding'; +import { fetchQueryBonding } from '@/utils/fetchQueryBounding'; import CommunityEmptyCase from './_components/CommunityEmptyCase'; import PostCardList from './_components/PostCardList'; diff --git a/src/app/custom-keyboard/_components/navigator/CartModal.tsx b/src/app/custom-keyboard/_components/navigator/CartModal.tsx index 3860abb2..ea3b356c 100644 --- a/src/app/custom-keyboard/_components/navigator/CartModal.tsx +++ b/src/app/custom-keyboard/_components/navigator/CartModal.tsx @@ -13,9 +13,9 @@ import { Button, Dialog, SignInModal } from '@/components'; import { POINT_KEY } from '@/constants/keyboardData'; import { ROUTER } from '@/constants/route'; import { KeyboardDataContext, StepContext } from '@/context'; -import { getColorUpperCase } from '@/libs/getColorUpperCase'; -import { getCustomKeyboardPrice } from '@/libs/getCustomKeyboardPrice'; -import { getUpdatedCartCountData } from '@/libs/getUpdatedCartData'; +import { getColorUpperCase } from '@/utils/getColorUpperCase'; +import { getCustomKeyboardPrice } from '@/utils/getCustomKeyboardPrice'; +import { getUpdatedCartCountData } from '@/utils/getUpdatedCartData'; import { blackSwitchImg, blueSwitchImg, brownSwitchImg, redSwitchImg } from '@/public/index'; import type { CartAPIDataType, ShopDataType } from '@/types/cartType'; import type { CustomKeyboardAPITypes, CustomKeyboardStepTypes, OptionDataType } from '@/types/customKeyboardType'; diff --git a/src/app/custom-keyboard/_components/navigator/TotalCostWithNavigation.tsx b/src/app/custom-keyboard/_components/navigator/TotalCostWithNavigation.tsx index 3b17aea5..bd0fae64 100644 --- a/src/app/custom-keyboard/_components/navigator/TotalCostWithNavigation.tsx +++ b/src/app/custom-keyboard/_components/navigator/TotalCostWithNavigation.tsx @@ -8,8 +8,8 @@ import { getRandomOptionProduct } from '@/api/customKeyboardAPI'; import { Button, Modal } from '@/components'; import { FocusKeyContext, KeyboardDataContext, StepContext } from '@/context'; import { useCaptureCanvas } from '@/hooks/useCanvasCaptrue'; -import { getBlurImageList } from '@/libs/getBlurImage'; -import { getCustomKeyboardPrice } from '@/libs/getCustomKeyboardPrice'; +import { getBlurImageList } from '@/utils/getBlurImage'; +import { getCustomKeyboardPrice } from '@/utils/getCustomKeyboardPrice'; import { ChevronIcon } from '@/public/index'; import type { CustomKeyboardStepStatusTypes, diff --git a/src/app/event/_components/AdvertisePanel.tsx b/src/app/event/_components/AdvertisePanel.tsx index 7c9f6d05..461ebe3d 100644 --- a/src/app/event/_components/AdvertisePanel.tsx +++ b/src/app/event/_components/AdvertisePanel.tsx @@ -1,7 +1,7 @@ 'use client'; import { ROUTER } from '@/constants/route'; -import { getCookie } from '@/libs/manageCookie'; +import { getCookie } from '@/utils/manageCookie'; import { eventTopImg } from '@/public/index'; import classNames from 'classnames/bind'; import Image from 'next/image'; diff --git a/src/app/event/_components/Roulette.tsx b/src/app/event/_components/Roulette.tsx index 6353fda6..e5aacf7e 100644 --- a/src/app/event/_components/Roulette.tsx +++ b/src/app/event/_components/Roulette.tsx @@ -7,7 +7,7 @@ import { Dialog } from '@/components'; import SignInModal from '@/components/SignInModal/SignInModal'; import { ANIMATION_DURATION, CONFETTI_NUMBER, EMOJI_SIZE, MIN_PRICE_MULTIPLIER, REWARDS } from '@/constants/event'; import { useCreateCouponMutation } from '@/hooks/useCreateCouponMutation'; -import { calculateRotation, getRandomIndex, getTodayDateString, hasRouletteCoupon } from '@/libs/wheelUtils'; +import { calculateRotation, getRandomIndex, getTodayDateString, hasRouletteCoupon } from '@/utils/wheelUtils'; import type { CouponResponse } from '@/types/couponType'; import { UserDataResponseType } from '@/types/userType'; import { useQuery, useQueryClient } from '@tanstack/react-query'; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 0b198da6..d6c96aed 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -9,8 +9,8 @@ import { getAlarm } from '@/api/alarmAPI'; import { getCartData } from '@/api/cartAPI'; import { getUserData } from '@/api/usersAPI'; import { Footer, Header } from '@/components'; -import { fetchQueryBonding } from '@/libs/fetchQueryBounding'; -import { getCookie } from '@/libs/manageCookie'; +import { fetchQueryBonding } from '@/utils/fetchQueryBounding'; +import { getCookie } from '@/utils/manageCookie'; import { pretendard } from '@/public/fonts/pretendard'; import { Providers } from './providers'; diff --git a/src/app/my-info/(account)/addresses/_components/Addresses/Address/Address.tsx b/src/app/my-info/(account)/addresses/_components/Addresses/Address/Address.tsx index 1979a63b..eb9f5b35 100644 --- a/src/app/my-info/(account)/addresses/_components/Addresses/Address/Address.tsx +++ b/src/app/my-info/(account)/addresses/_components/Addresses/Address/Address.tsx @@ -7,7 +7,7 @@ import { toast } from 'react-toastify'; import { AddAddressModal, Dialog, Modal } from '@/components'; import { useDeleteAddress } from '@/hooks/useDeleteAddress'; import { useUpdateAddress } from '@/hooks/useUpdateAddress'; -import { formatPhoneNumber } from '@/libs/formatPhoneNumber'; +import { formatPhoneNumber } from '@/utils/formatPhoneNumber'; import type { UserAddress } from '@/types/shippingType'; import styles from './Address.module.scss'; diff --git a/src/app/my-info/(account)/addresses/_components/Addresses/Addresses.tsx b/src/app/my-info/(account)/addresses/_components/Addresses/Addresses.tsx index 8acec6c0..ab523b00 100644 --- a/src/app/my-info/(account)/addresses/_components/Addresses/Addresses.tsx +++ b/src/app/my-info/(account)/addresses/_components/Addresses/Addresses.tsx @@ -1,7 +1,7 @@ 'use client'; import { useAddresses } from '@/hooks/useAddresses'; -import { sortAddressesByDefault } from '@/libs/sortAddressesByDefault'; +import { sortAddressesByDefault } from '@/utils/sortAddressesByDefault'; import classNames from 'classnames/bind'; import { Address, AddressesEmptyCase } from './index'; diff --git a/src/app/my-info/(account)/cart/_components/CartCard.tsx b/src/app/my-info/(account)/cart/_components/CartCard.tsx index cd7f210a..43e344af 100644 --- a/src/app/my-info/(account)/cart/_components/CartCard.tsx +++ b/src/app/my-info/(account)/cart/_components/CartCard.tsx @@ -10,7 +10,7 @@ import { Button, ItemOverview, Modal } from '@/components'; import { ROUTER } from '@/constants/route'; import type { OptionChageAPIType, CustomCardProps, ShopCardProps } from '@/types/cartType'; import type { CreateOrderResponseType } from '@/types/orderType'; -import { formatCartDataToItemOverview } from '@/libs/formatCartDataToItemOverview'; +import { formatCartDataToItemOverview } from '@/utils/formatCartDataToItemOverview'; import CardCheckBox from './CardCheckBox'; import OptionEditModal from './OptionEditModal'; diff --git a/src/app/my-info/(account)/coupons/_components/Coupon.tsx b/src/app/my-info/(account)/coupons/_components/Coupon.tsx index 340660fb..0be31bd5 100644 --- a/src/app/my-info/(account)/coupons/_components/Coupon.tsx +++ b/src/app/my-info/(account)/coupons/_components/Coupon.tsx @@ -4,8 +4,8 @@ import classNames from 'classnames/bind'; import { VerticalTripleDotIcon, ChevronIcon } from '@/public/index'; import { useState } from 'react'; -import { formatDateFromYMD } from '@/libs/formatDateToString'; -import { formatNumberToPrice } from '@/libs/formatNumberToPrice'; +import { formatDateFromYMD } from '@/utils/formatDateToString'; +import { formatNumberToPrice } from '@/utils/formatNumberToPrice'; import type { CouponTypes } from '@/types/couponType'; import styles from './Coupon.module.scss'; diff --git a/src/app/my-info/(account)/orders/_components/Orders/OrderItemList/OrderItem/OrderItem.tsx b/src/app/my-info/(account)/orders/_components/Orders/OrderItemList/OrderItem/OrderItem.tsx index ba1f3282..cfe49e13 100644 --- a/src/app/my-info/(account)/orders/_components/Orders/OrderItemList/OrderItem/OrderItem.tsx +++ b/src/app/my-info/(account)/orders/_components/Orders/OrderItemList/OrderItem/OrderItem.tsx @@ -4,7 +4,7 @@ import { useState } from 'react'; import { ItemOverview, Modal, WriteEditModal } from '@/components'; import { ROUTER } from '@/constants/route'; -import { getOrderStatusDescription } from '@/libs/getOrderStatusDescriptions'; +import { getOrderStatusDescription } from '@/utils/getOrderStatusDescriptions'; import type { OrderItem as OrderItemT, OrderStatus } from '@/types/orderType'; import OrderItemButton from './OrderItemButton/OrderItemButton'; diff --git a/src/app/my-info/(account)/orders/_components/Orders/OrderItemList/OrderItemList.tsx b/src/app/my-info/(account)/orders/_components/Orders/OrderItemList/OrderItemList.tsx index 20902fb9..851866d2 100644 --- a/src/app/my-info/(account)/orders/_components/Orders/OrderItemList/OrderItemList.tsx +++ b/src/app/my-info/(account)/orders/_components/Orders/OrderItemList/OrderItemList.tsx @@ -2,7 +2,7 @@ import classNames from 'classnames/bind'; import Link from 'next/link'; import { ROUTER } from '@/constants/route'; -import { formatDateWithDot } from '@/libs/formatDateToString'; +import { formatDateWithDot } from '@/utils/formatDateToString'; import { ChevronIcon } from '@/public/index'; import type { Order } from '@/types/orderType'; import OrderItem from './OrderItem/OrderItem'; diff --git a/src/app/my-info/(account)/reviews/_components/MyReviewList.tsx b/src/app/my-info/(account)/reviews/_components/MyReviewList.tsx index ea89349f..69d62f6a 100644 --- a/src/app/my-info/(account)/reviews/_components/MyReviewList.tsx +++ b/src/app/my-info/(account)/reviews/_components/MyReviewList.tsx @@ -3,7 +3,7 @@ import { getProductDetail } from '@/api/productAPI'; import { getUserProductReviews } from '@/api/productReviewAPI'; -import { formatDateToQueryString } from '@/libs/formatDateToQueryString'; +import { formatDateToQueryString } from '@/utils/formatDateToQueryString'; import { useQueries, useQuery, useQueryClient } from '@tanstack/react-query'; import classNames from 'classnames/bind'; diff --git a/src/app/my-info/(account)/reviews/_components/MyReviewProduct.tsx b/src/app/my-info/(account)/reviews/_components/MyReviewProduct.tsx index 5843ff9c..ac3eb0ac 100644 --- a/src/app/my-info/(account)/reviews/_components/MyReviewProduct.tsx +++ b/src/app/my-info/(account)/reviews/_components/MyReviewProduct.tsx @@ -12,7 +12,7 @@ import type { ReviewDto } from '@/types/productReviewType'; import type { ProductType } from '@/types/productType'; import { Dialog, Modal } from '@/components'; import WriteEditModal from '@/components/WriteEditModal/WriteEditModal'; -import { formatDateWithDot } from '@/libs/formatDateToString'; +import { formatDateWithDot } from '@/utils/formatDateToString'; import styles from './MyReviewProduct.module.scss'; diff --git a/src/app/my-info/_components/UserProfile/EditProfileModal/EditProfileModal.tsx b/src/app/my-info/_components/UserProfile/EditProfileModal/EditProfileModal.tsx index 5862bbe9..ab25e885 100644 --- a/src/app/my-info/_components/UserProfile/EditProfileModal/EditProfileModal.tsx +++ b/src/app/my-info/_components/UserProfile/EditProfileModal/EditProfileModal.tsx @@ -10,9 +10,9 @@ import { Label } from '@/components/parts'; import { GENDER_OPTION } from '@/constants/dropdownOptions'; import { useCheckNickname } from '@/hooks/useCheckNickname'; import { useUpdateProfile } from '@/hooks/useUpdateProfile'; -import { changePhoneNumber } from '@/libs/changePhoneNumber'; -import { formatPhoneNumber } from '@/libs/formatPhoneNumber'; -import { unFormatPhoneNumber } from '@/libs/unFormatPhoneNumber'; +import { changePhoneNumber } from '@/utils/changePhoneNumber'; +import { formatPhoneNumber } from '@/utils/formatPhoneNumber'; +import { unFormatPhoneNumber } from '@/utils/unFormatPhoneNumber'; import type { Users } from '@/types/userType'; import styles from './EditProfileModal.module.scss'; diff --git a/src/app/my-info/layout.tsx b/src/app/my-info/layout.tsx index 8f2e04e8..f61471dc 100644 --- a/src/app/my-info/layout.tsx +++ b/src/app/my-info/layout.tsx @@ -11,8 +11,8 @@ import { getCoupon } from '@/api/couponAPI'; import { getMyPosts } from '@/api/communityAPI'; import { getProductLikes } from '@/api/likesAPI'; import { getUserProductReviews } from '@/api/productReviewAPI'; -import { fetchQueryBonding } from '@/libs/fetchQueryBounding'; -import { formatDateToQueryString } from '@/libs/formatDateToQueryString'; +import { fetchQueryBonding } from '@/utils/fetchQueryBounding'; +import { formatDateToQueryString } from '@/utils/formatDateToQueryString'; import type { UserDataResponseType } from '@/types/userType'; import { UserRouteProvider } from '@/components'; import { SNB } from './_components'; diff --git a/src/app/order-info/_components/OrderDetail.tsx b/src/app/order-info/_components/OrderDetail.tsx index 0c009c84..99194901 100644 --- a/src/app/order-info/_components/OrderDetail.tsx +++ b/src/app/order-info/_components/OrderDetail.tsx @@ -6,8 +6,8 @@ import { useRouter } from 'next/navigation'; import CheckoutAddress from '@/app/payment/_components/CheckoutForm/parts/CheckoutAddress'; import { Button, ItemOverview } from '@/components'; import { useOrderQuery } from '@/hooks/useOrderQuery'; -import { formatDateToKSTString } from '@/libs/formatDateToKSTString'; -import { formatNumber } from '@/libs/formatNumber'; +import { formatDateToKSTString } from '@/utils/formatDateToKSTString'; +import { formatNumber } from '@/utils/formatNumber'; import styles from './OrderDetail.module.scss'; diff --git a/src/app/order-info/page.tsx b/src/app/order-info/page.tsx index bcbbb63c..f944df27 100644 --- a/src/app/order-info/page.tsx +++ b/src/app/order-info/page.tsx @@ -3,7 +3,7 @@ import classNames from 'classnames/bind'; import { getOrder } from '@/api/orderAPI'; import { getUserData } from '@/api/usersAPI'; -import { fetchQueryBonding } from '@/libs/fetchQueryBounding'; +import { fetchQueryBonding } from '@/utils/fetchQueryBounding'; import { UserRouteProvider } from '@/components'; import OrderDetail from './_components/OrderDetail'; diff --git a/src/app/payment/(paymentResult)/success/page.tsx b/src/app/payment/(paymentResult)/success/page.tsx index c115f5eb..bc78f9e8 100644 --- a/src/app/payment/(paymentResult)/success/page.tsx +++ b/src/app/payment/(paymentResult)/success/page.tsx @@ -2,7 +2,7 @@ import { getUserData } from '@/api/usersAPI'; import { ROUTER } from '@/constants/route'; import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query'; import { redirect } from 'next/navigation'; -import { fetchQueryBonding } from '@/libs/fetchQueryBounding'; +import { fetchQueryBonding } from '@/utils/fetchQueryBounding'; import CheckoutNavigation from '../../_components/CheckoutNavigation/CheckoutNavigation'; import CheckoutCompleted from './_components/CheckoutCompleted'; diff --git a/src/app/payment/_components/CheckoutForm/CheckoutForm.tsx b/src/app/payment/_components/CheckoutForm/CheckoutForm.tsx index f5dbc91b..77577ff1 100644 --- a/src/app/payment/_components/CheckoutForm/CheckoutForm.tsx +++ b/src/app/payment/_components/CheckoutForm/CheckoutForm.tsx @@ -9,7 +9,7 @@ import { Input, Label } from '@/components/parts'; import { usePaymentQuery } from '@/hooks/usePaymentQuery'; import { useSelectedAddress } from '@/hooks/useSelectedAddress'; import { useUpdatePaymentInfo } from '@/hooks/useUpdatePaymentInfo'; -import { formatNumber } from '@/libs/formatNumber'; +import { formatNumber } from '@/utils/formatNumber'; import type { OrderItem } from '@/types/orderType'; import type { UserAddress } from '@/types/shippingType'; import CheckoutAddress from './parts/CheckoutAddress'; diff --git a/src/app/payment/_components/CheckoutForm/parts/CheckoutAddress.tsx b/src/app/payment/_components/CheckoutForm/parts/CheckoutAddress.tsx index 8809c6fc..c3128b84 100644 --- a/src/app/payment/_components/CheckoutForm/parts/CheckoutAddress.tsx +++ b/src/app/payment/_components/CheckoutForm/parts/CheckoutAddress.tsx @@ -7,7 +7,7 @@ import { toast } from 'react-toastify'; import { AddAddressModal, Button, Dropdown, Modal } from '@/components'; import { useCreateAddress } from '@/hooks/useCreateAddress'; import { useUpdatePaymentInfo } from '@/hooks/useUpdatePaymentInfo'; -import { formatPhoneNumber } from '@/libs/formatPhoneNumber'; +import { formatPhoneNumber } from '@/utils/formatPhoneNumber'; import type { ShippingAddressResponse } from '@/types/orderType'; import type { UserAddress } from '@/types/shippingType'; import CheckoutAddressEmptyCase from './CheckoutAddressEmptyCase'; diff --git a/src/app/payment/_components/CheckoutForm/parts/CheckoutAddressModal.tsx b/src/app/payment/_components/CheckoutForm/parts/CheckoutAddressModal.tsx index dd463f46..f0f704da 100644 --- a/src/app/payment/_components/CheckoutForm/parts/CheckoutAddressModal.tsx +++ b/src/app/payment/_components/CheckoutForm/parts/CheckoutAddressModal.tsx @@ -1,6 +1,6 @@ import { Address, AddressesEmptyCase } from '@/app/my-info/(account)/addresses/_components/Addresses'; import { useAddresses } from '@/hooks/useAddresses'; -import { sortAddressesByDefault } from '@/libs/sortAddressesByDefault'; +import { sortAddressesByDefault } from '@/utils/sortAddressesByDefault'; import type { UserAddress } from '@/types/shippingType'; import classNames from 'classnames/bind'; diff --git a/src/app/payment/_components/CheckoutForm/parts/PaymentContainer.tsx b/src/app/payment/_components/CheckoutForm/parts/PaymentContainer.tsx index 0dca817b..db91b2b1 100644 --- a/src/app/payment/_components/CheckoutForm/parts/PaymentContainer.tsx +++ b/src/app/payment/_components/CheckoutForm/parts/PaymentContainer.tsx @@ -7,7 +7,7 @@ import { useEffect, useState } from 'react'; import { Button } from '@/components'; import { ROUTER } from '@/constants/route'; import { useUser } from '@/hooks/useUser'; -import { renderPaymentProductName } from '@/libs/renderPaymentProductName'; +import { renderPaymentProductName } from '@/utils/renderPaymentProductName'; import type { OrderDetailData } from '@/types/orderType'; import styles from './PaymentContainer.module.scss'; diff --git a/src/app/providers.tsx b/src/app/providers.tsx index 8b9406da..6d6c3536 100644 --- a/src/app/providers.tsx +++ b/src/app/providers.tsx @@ -1,12 +1,13 @@ 'use client'; -import { QueryClient, QueryClientProvider, isServer } from '@tanstack/react-query'; +import { QueryClientProvider } from '@tanstack/react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import classNames from 'classnames/bind'; -import { ReactNode, useRef } from 'react'; +import { PropsWithChildren, useRef } from 'react'; import { ScrollUpButton } from '@/components'; import { ToastContainer, Zoom } from 'react-toastify'; +import { getQueryClient } from '@/libs/tanstackQuery/client'; import AOSWrapper from './_components/Aos/AOSWrapper'; import AdvertisePanel from './event/_components/AdvertisePanel'; @@ -16,31 +17,7 @@ import styles from './providers.module.scss'; const cn = classNames.bind(styles); -interface ProvidersProps { - children: ReactNode; -} - -function makeQueryClient() { - return new QueryClient({ - defaultOptions: { - queries: { - staleTime: 60 * 1000, - }, - }, - }); -} - -let browserQueryClient: QueryClient | undefined; - -function getQueryClient() { - if (isServer) { - return makeQueryClient(); - } - if (!browserQueryClient) browserQueryClient = makeQueryClient(); - return browserQueryClient; -} - -export function Providers({ children }: ProvidersProps) { +export function Providers({ children }: PropsWithChildren) { const queryClient = getQueryClient(); const scrollRef = useRef(null); diff --git a/src/app/shop/[category]/[productId]/_components/Product/OptionWithButtons.tsx b/src/app/shop/[category]/[productId]/_components/Product/OptionWithButtons.tsx index 2b78fd8f..3da037bb 100644 --- a/src/app/shop/[category]/[productId]/_components/Product/OptionWithButtons.tsx +++ b/src/app/shop/[category]/[productId]/_components/Product/OptionWithButtons.tsx @@ -15,7 +15,7 @@ import type { CartProductType, ProductType } from '@/types/productType'; import { Button, CountInput, Dialog, Dropdown, SignInModal } from '@/components'; import { ROUTER } from '@/constants/route'; -import { getUpdatedCartCountData } from '@/libs/getUpdatedCartData'; +import { getUpdatedCartCountData } from '@/utils/getUpdatedCartData'; import type { Users } from '@/types/userType'; import OptionContainer from './OptionContainer'; diff --git a/src/app/shop/[category]/[productId]/_components/Product/ProductDetail.tsx b/src/app/shop/[category]/[productId]/_components/Product/ProductDetail.tsx index deff1400..44b705c3 100644 --- a/src/app/shop/[category]/[productId]/_components/Product/ProductDetail.tsx +++ b/src/app/shop/[category]/[productId]/_components/Product/ProductDetail.tsx @@ -5,7 +5,7 @@ import { ROUTER } from '@/constants/route'; import { QueryClient } from '@tanstack/react-query'; import classNames from 'classnames/bind'; import { redirect } from 'next/navigation'; -import { fetchQueryBonding } from '@/libs/fetchQueryBounding'; +import { fetchQueryBonding } from '@/utils/fetchQueryBounding'; import OptionWithButton from './OptionWithButtons'; import styles from './ProductDetail.module.scss'; import Thumbnail from './Thumbnail'; diff --git a/src/app/shop/[category]/[productId]/_components/TabContents/Review/KeywordRatios.tsx b/src/app/shop/[category]/[productId]/_components/TabContents/Review/KeywordRatios.tsx index 7fea0b5d..30937a69 100644 --- a/src/app/shop/[category]/[productId]/_components/TabContents/Review/KeywordRatios.tsx +++ b/src/app/shop/[category]/[productId]/_components/TabContents/Review/KeywordRatios.tsx @@ -1,6 +1,6 @@ import { CATEGORY_MAP } from '@/constants/product'; import { REVIEW_KEYWORD } from '@/constants/reviewKeyword'; -import { getMaxKey } from '@/libs/getMaxKey'; +import { getMaxKey } from '@/utils/getMaxKey'; import type { KeywordStatistics } from '@/types/productReviewType'; import classNames from 'classnames/bind'; import { usePathname } from 'next/navigation'; diff --git a/src/app/shop/[category]/[productId]/_components/TabContents/Review/ProductReviewList.tsx b/src/app/shop/[category]/[productId]/_components/TabContents/Review/ProductReviewList.tsx index fcc69cb3..e125e982 100644 --- a/src/app/shop/[category]/[productId]/_components/TabContents/Review/ProductReviewList.tsx +++ b/src/app/shop/[category]/[productId]/_components/TabContents/Review/ProductReviewList.tsx @@ -4,7 +4,7 @@ import Pagination from '@/components/Pagination/Pagination'; import ReviewItem from '@/components/ReviewItem/ReviewItem'; import { PRODUCT_REVIEW_SORT_OPTIONS } from '@/constants/dropdownOptions'; -import { searchParamsToObject } from '@/libs/searchParamsToObject'; +import { searchParamsToObject } from '@/utils/searchParamsToObject'; import { NoReviewIcon } from '@/public/index'; import type { ProductReviewType, ReviewParamsType } from '@/types/productReviewType'; diff --git a/src/components/AddAddressModal/AddAddressModal.tsx b/src/components/AddAddressModal/AddAddressModal.tsx index 29ea3262..63d4011f 100644 --- a/src/components/AddAddressModal/AddAddressModal.tsx +++ b/src/components/AddAddressModal/AddAddressModal.tsx @@ -7,9 +7,9 @@ import { FieldValues, SubmitHandler, useForm } from 'react-hook-form'; import { Button, InputField } from '@/components'; import { Input, Label } from '@/components/parts'; -import { changePhoneNumber } from '@/libs/changePhoneNumber'; -import { formatPhoneNumber } from '@/libs/formatPhoneNumber'; -import { unFormatPhoneNumber } from '@/libs/unFormatPhoneNumber'; +import { changePhoneNumber } from '@/utils/changePhoneNumber'; +import { formatPhoneNumber } from '@/utils/formatPhoneNumber'; +import { unFormatPhoneNumber } from '@/utils/unFormatPhoneNumber'; import { CheckboxCircleIcon } from '@/public/index'; import type { UserAddress } from '@/types/shippingType'; diff --git a/src/components/CustomImage/CustomImage.tsx b/src/components/CustomImage/CustomImage.tsx index f81176f1..2ead4549 100644 --- a/src/components/CustomImage/CustomImage.tsx +++ b/src/components/CustomImage/CustomImage.tsx @@ -4,7 +4,7 @@ import { useState } from 'react'; import Image, { ImageProps } from 'next/image'; import { errorImg } from '@/public/index'; import { StaticImport } from 'next/dist/shared/lib/get-img-props'; -import { getValidImage, isValidImageURL } from '@/libs/checkValidImage'; +import { getValidImage, isValidImageURL } from '@/utils/checkValidImage'; interface CustomImageProps extends ImageProps { errorSrc?: string | StaticImport; diff --git a/src/components/CustomOption/FirstOption.tsx b/src/components/CustomOption/FirstOption.tsx index 22c04ab0..448b6a98 100644 --- a/src/components/CustomOption/FirstOption.tsx +++ b/src/components/CustomOption/FirstOption.tsx @@ -7,7 +7,7 @@ import type { CustomKeyboardTextureTypes, CustomKeyboardTypeTypes, } from '@/types/customKeyboardType'; -import { getColorUpperCase } from '@/libs/getColorUpperCase'; +import { getColorUpperCase } from '@/utils/getColorUpperCase'; import OptionWrapper from './OptionWrapper'; import styles from './CustomOption.module.scss'; diff --git a/src/components/CustomOption/OptionWrapper.tsx b/src/components/CustomOption/OptionWrapper.tsx index f5d39dd5..262c8477 100644 --- a/src/components/CustomOption/OptionWrapper.tsx +++ b/src/components/CustomOption/OptionWrapper.tsx @@ -2,7 +2,7 @@ import { ReactNode, RefObject, useCallback, useEffect, useRef, useState } from 'react'; import classNames from 'classnames/bind'; -import isTextOverFlow from '@/libs/isTextOverFlow'; +import isTextOverFlow from '@/utils/isTextOverFlow'; import styles from './OptionWrapper.module.scss'; const cn = classNames.bind(styles); diff --git a/src/components/CustomOption/SecondOption.tsx b/src/components/CustomOption/SecondOption.tsx index 56b734af..c157f7f3 100644 --- a/src/components/CustomOption/SecondOption.tsx +++ b/src/components/CustomOption/SecondOption.tsx @@ -4,7 +4,7 @@ import classNames from 'classnames/bind'; import { RefObject } from 'react'; import { POINT_KEY } from '@/constants/keyboardData'; -import { getColorUpperCase } from '@/libs/getColorUpperCase'; +import { getColorUpperCase } from '@/utils/getColorUpperCase'; import type { CustomKeyboardKeyTypes, CustomKeyboardPointKeyType } from '@/types/customKeyboardType'; import { Color } from '@react-three/fiber'; import OptionWrapper from './OptionWrapper'; diff --git a/src/components/CustomOption/TooltipColor.tsx b/src/components/CustomOption/TooltipColor.tsx index 7c2bdcce..c8b98b11 100644 --- a/src/components/CustomOption/TooltipColor.tsx +++ b/src/components/CustomOption/TooltipColor.tsx @@ -2,8 +2,8 @@ import { Color } from '@react-three/fiber'; import { useRef, useState } from 'react'; import classNames from 'classnames/bind'; -import { getColorUpperCase } from '@/libs/getColorUpperCase'; -import { convertHexToHsva, convertHsvaToHsla } from '@/libs/convertColor'; +import { getColorUpperCase } from '@/utils/getColorUpperCase'; +import { convertHexToHsva, convertHsvaToHsla } from '@/utils/convertColor'; import styles from './TooltipColor.module.scss'; diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 0b2bc11d..f4423c26 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -11,7 +11,7 @@ import { getCartData } from '@/api/cartAPI'; import { offCookieChange, onCookieChange } from '@/api/interceptor/event'; import { CustomImage, SignInModal } from '@/components'; import { ROUTER } from '@/constants/route'; -import { deleteCookie } from '@/libs/manageCookie'; +import { deleteCookie } from '@/utils/manageCookie'; import { useUser } from '@/hooks/useUser'; import { LogoIcon, UserIcon } from '@/public/index'; import type { CartAPIDataType } from '@/types/cartType'; diff --git a/src/components/Header/HeaderParts/LogoutButton.tsx b/src/components/Header/HeaderParts/LogoutButton.tsx index 1c2a16c6..1a980920 100644 --- a/src/components/Header/HeaderParts/LogoutButton.tsx +++ b/src/components/Header/HeaderParts/LogoutButton.tsx @@ -5,7 +5,7 @@ import { usePathname, useRouter } from 'next/navigation'; import { useQueryClient } from '@tanstack/react-query'; import classNames from 'classnames/bind'; -import { deleteCookie } from '@/libs/manageCookie'; +import { deleteCookie } from '@/utils/manageCookie'; import { ROUTER } from '@/constants/route'; import styles from './AuthButton.module.scss'; diff --git a/src/components/Header/HeaderParts/NotificationButton.tsx b/src/components/Header/HeaderParts/NotificationButton.tsx index 3b10cb68..53ff736d 100644 --- a/src/components/Header/HeaderParts/NotificationButton.tsx +++ b/src/components/Header/HeaderParts/NotificationButton.tsx @@ -10,7 +10,7 @@ import { useOutsideClick } from '@/hooks/useOutsideClick'; import { NotificationIcon } from '@/public/index'; import { getAlarm, postAlarmRead, deleteAlarm } from '@/api/alarmAPI'; import type { AlarmAPIDataType, AlarmType } from '@/types/alarmType'; -import { getCurrentAlarm } from '@/libs/getCurrentAlarm'; +import { getCurrentAlarm } from '@/utils/getCurrentAlarm'; import { useEventSource } from '@/hooks/useEventSource'; import { useEventAlarmStore, useProductAlarmStore } from '@/store/alarmStore'; import NotificationCard from './NotificationCard'; diff --git a/src/components/Header/HeaderParts/NotificationCard.tsx b/src/components/Header/HeaderParts/NotificationCard.tsx index 880b8f5d..b404171d 100644 --- a/src/components/Header/HeaderParts/NotificationCard.tsx +++ b/src/components/Header/HeaderParts/NotificationCard.tsx @@ -2,7 +2,7 @@ import { MouseEvent } from 'react'; import classNames from 'classnames/bind'; import type { AlarmDataType, AlarmType } from '@/types/alarmType'; -import { calculateTimeDifference } from '@/libs/calculateDate'; +import { calculateTimeDifference } from '@/utils/calculateDate'; import { DeleteIcon } from '@/public/index'; import Modal from '@/components/Modal/Modal'; diff --git a/src/components/ItemOverview/ItemOverview.tsx b/src/components/ItemOverview/ItemOverview.tsx index 18ed1b37..84ada874 100644 --- a/src/components/ItemOverview/ItemOverview.tsx +++ b/src/components/ItemOverview/ItemOverview.tsx @@ -6,7 +6,7 @@ import classNames from 'classnames/bind'; import { getProductDetail } from '@/api/productAPI'; import type { ProductType } from '@/types/productType'; import type { OrderItem, SwitchOptionType } from '@/types/orderType'; -import { convertCategory } from '@/libs/convertProductCategory'; +import { convertCategory } from '@/utils/convertProductCategory'; import { IMAGE_BLUR } from '@/constants/blurImage'; import { CustomImage, CustomOption, Skeleton } from '@/components'; import ItemWrapper from './ItemWrapper'; diff --git a/src/components/ItemOverview/ShopOption.tsx b/src/components/ItemOverview/ShopOption.tsx index de10b38c..6d9952a6 100644 --- a/src/components/ItemOverview/ShopOption.tsx +++ b/src/components/ItemOverview/ShopOption.tsx @@ -2,7 +2,7 @@ import { useRef, useState } from 'react'; import classNames from 'classnames/bind'; -import isTextOverFlow from '@/libs/isTextOverFlow'; +import isTextOverFlow from '@/utils/isTextOverFlow'; import styles from './ShopOption.module.scss'; diff --git a/src/components/ReviewItem/ReviewItem.tsx b/src/components/ReviewItem/ReviewItem.tsx index d4abab62..0bd04020 100644 --- a/src/components/ReviewItem/ReviewItem.tsx +++ b/src/components/ReviewItem/ReviewItem.tsx @@ -7,7 +7,7 @@ import { useState } from 'react'; import { Rating } from '@/components'; import { CATEGORY_MAP } from '@/constants/product'; import { REVIEW_KEYWORD } from '@/constants/reviewKeyword'; -import { formatDateWithDot } from '@/libs/formatDateToString'; +import { formatDateWithDot } from '@/utils/formatDateToString'; import type { ReviewDto } from '@/types/productReviewType'; import ReviewLikeButton from '../Buttons/ReviewLikeButton/ReviewLikeButton'; import ProfileImage from '../ProfileImage/ProfileImage'; diff --git a/src/components/SearchBox/SearchBox.tsx b/src/components/SearchBox/SearchBox.tsx index c044d0d8..47e28b14 100644 --- a/src/components/SearchBox/SearchBox.tsx +++ b/src/components/SearchBox/SearchBox.tsx @@ -8,7 +8,7 @@ import { ChangeEvent, FormEvent, KeyboardEvent, useEffect, useRef, useState } fr import { getSearchSuggestion } from '@/api/searchAPI'; import { ROUTER } from '@/constants/route'; import { useOutsideClick } from '@/hooks/useOutsideClick'; -import { charMatcher } from '@/libs/charMatcher'; +import { charMatcher } from '@/utils/charMatcher'; import { SearchIcon } from '@/public/index'; import type { SuggestionDataType } from '@/types/searchType'; import { toast } from 'react-toastify'; diff --git a/src/components/SignInModal/SignInModal.tsx b/src/components/SignInModal/SignInModal.tsx index c0a19a31..0c0c6f9f 100644 --- a/src/components/SignInModal/SignInModal.tsx +++ b/src/components/SignInModal/SignInModal.tsx @@ -8,7 +8,7 @@ import { toast } from 'react-toastify'; import { postSignin } from '@/api/authAPI'; import { ROUTER } from '@/constants/route'; -import { setCookie } from '@/libs/manageCookie'; +import { setCookie } from '@/utils/manageCookie'; import type { FetchSignInInfoTypes } from '@/types/authType'; import { SpinLoading } from '@/public/index'; import Button from '../Buttons/Button/Button'; diff --git a/src/components/parts/Input.tsx b/src/components/parts/Input.tsx index 04da7953..3db1cbbb 100644 --- a/src/components/parts/Input.tsx +++ b/src/components/parts/Input.tsx @@ -1,4 +1,4 @@ -import { isNumberAllowedKey } from '@/libs/isNumberAllowedKey'; +import { isNumberAllowedKey } from '@/utils/isNumberAllowedKey'; import classNames from 'classnames/bind'; import { InputHTMLAttributes, KeyboardEvent, forwardRef, useEffect, useState } from 'react'; import styles from './Input.module.scss'; diff --git a/src/hooks/useEventSource.ts b/src/hooks/useEventSource.ts index f5735c37..a2176c0b 100644 --- a/src/hooks/useEventSource.ts +++ b/src/hooks/useEventSource.ts @@ -1,4 +1,4 @@ -import { getCookie } from '@/libs/manageCookie'; +import { getCookie } from '@/utils/manageCookie'; import { useQueryClient } from '@tanstack/react-query'; import { Event, EventSourcePolyfill } from 'event-source-polyfill'; import { MutableRefObject, useEffect, useRef } from 'react'; diff --git a/src/libs/tanstackQuery/client.ts b/src/libs/tanstackQuery/client.ts new file mode 100644 index 00000000..d678a379 --- /dev/null +++ b/src/libs/tanstackQuery/client.ts @@ -0,0 +1,21 @@ +import { QueryClient, isServer } from '@tanstack/react-query'; + +export const defaultStaleTime = 60 * 1000; + +function createQueryClient() { + return new QueryClient({ + defaultOptions: { + queries: { + staleTime: defaultStaleTime, + }, + }, + }); +} + +let browserQueryClient: QueryClient | undefined; + +export function getQueryClient() { + if (isServer) return createQueryClient(); + if (!browserQueryClient) browserQueryClient = createQueryClient(); + return browserQueryClient; +} diff --git a/src/libs/addEnterKeyEvent.ts b/src/utils/addEnterKeyEvent.ts similarity index 100% rename from src/libs/addEnterKeyEvent.ts rename to src/utils/addEnterKeyEvent.ts diff --git a/src/libs/calculateDate.ts b/src/utils/calculateDate.ts similarity index 100% rename from src/libs/calculateDate.ts rename to src/utils/calculateDate.ts diff --git a/src/libs/changePhoneNumber.ts b/src/utils/changePhoneNumber.ts similarity index 100% rename from src/libs/changePhoneNumber.ts rename to src/utils/changePhoneNumber.ts diff --git a/src/libs/charMatcher.ts b/src/utils/charMatcher.ts similarity index 100% rename from src/libs/charMatcher.ts rename to src/utils/charMatcher.ts diff --git a/src/libs/checkValidImage.ts b/src/utils/checkValidImage.ts similarity index 100% rename from src/libs/checkValidImage.ts rename to src/utils/checkValidImage.ts diff --git a/src/libs/communityPopOverOption.ts b/src/utils/communityPopOverOption.ts similarity index 100% rename from src/libs/communityPopOverOption.ts rename to src/utils/communityPopOverOption.ts diff --git a/src/libs/convertColor.ts b/src/utils/convertColor.ts similarity index 100% rename from src/libs/convertColor.ts rename to src/utils/convertColor.ts diff --git a/src/libs/convertProductCategory.ts b/src/utils/convertProductCategory.ts similarity index 100% rename from src/libs/convertProductCategory.ts rename to src/utils/convertProductCategory.ts diff --git a/src/libs/fetchQueryBounding.ts b/src/utils/fetchQueryBounding.ts similarity index 100% rename from src/libs/fetchQueryBounding.ts rename to src/utils/fetchQueryBounding.ts diff --git a/src/libs/formatBirthDate.ts b/src/utils/formatBirthDate.ts similarity index 100% rename from src/libs/formatBirthDate.ts rename to src/utils/formatBirthDate.ts diff --git a/src/libs/formatCartDataToItemOverview.ts b/src/utils/formatCartDataToItemOverview.ts similarity index 100% rename from src/libs/formatCartDataToItemOverview.ts rename to src/utils/formatCartDataToItemOverview.ts diff --git a/src/libs/formatDateToKSTString.ts b/src/utils/formatDateToKSTString.ts similarity index 100% rename from src/libs/formatDateToKSTString.ts rename to src/utils/formatDateToKSTString.ts diff --git a/src/libs/formatDateToQueryString.ts b/src/utils/formatDateToQueryString.ts similarity index 100% rename from src/libs/formatDateToQueryString.ts rename to src/utils/formatDateToQueryString.ts diff --git a/src/libs/formatDateToString.ts b/src/utils/formatDateToString.ts similarity index 100% rename from src/libs/formatDateToString.ts rename to src/utils/formatDateToString.ts diff --git a/src/libs/formatKSTSDate.ts b/src/utils/formatKSTSDate.ts similarity index 100% rename from src/libs/formatKSTSDate.ts rename to src/utils/formatKSTSDate.ts diff --git a/src/libs/formatNumber.ts b/src/utils/formatNumber.ts similarity index 100% rename from src/libs/formatNumber.ts rename to src/utils/formatNumber.ts diff --git a/src/libs/formatNumberToPrice.ts b/src/utils/formatNumberToPrice.ts similarity index 100% rename from src/libs/formatNumberToPrice.ts rename to src/utils/formatNumberToPrice.ts diff --git a/src/libs/formatPhoneNumber.ts b/src/utils/formatPhoneNumber.ts similarity index 100% rename from src/libs/formatPhoneNumber.ts rename to src/utils/formatPhoneNumber.ts diff --git a/src/libs/getBlurImage.ts b/src/utils/getBlurImage.ts similarity index 100% rename from src/libs/getBlurImage.ts rename to src/utils/getBlurImage.ts diff --git a/src/libs/getColorUpperCase.ts b/src/utils/getColorUpperCase.ts similarity index 100% rename from src/libs/getColorUpperCase.ts rename to src/utils/getColorUpperCase.ts diff --git a/src/libs/getCurrentAlarm.ts b/src/utils/getCurrentAlarm.ts similarity index 100% rename from src/libs/getCurrentAlarm.ts rename to src/utils/getCurrentAlarm.ts diff --git a/src/libs/getCustomKeyboardPrice.ts b/src/utils/getCustomKeyboardPrice.ts similarity index 100% rename from src/libs/getCustomKeyboardPrice.ts rename to src/utils/getCustomKeyboardPrice.ts diff --git a/src/libs/getMaxKey.ts b/src/utils/getMaxKey.ts similarity index 100% rename from src/libs/getMaxKey.ts rename to src/utils/getMaxKey.ts diff --git a/src/libs/getOrderStatusDescriptions.ts b/src/utils/getOrderStatusDescriptions.ts similarity index 100% rename from src/libs/getOrderStatusDescriptions.ts rename to src/utils/getOrderStatusDescriptions.ts diff --git a/src/libs/getUpdatedCartData.ts b/src/utils/getUpdatedCartData.ts similarity index 100% rename from src/libs/getUpdatedCartData.ts rename to src/utils/getUpdatedCartData.ts diff --git a/src/libs/isNumberAllowedKey.ts b/src/utils/isNumberAllowedKey.ts similarity index 100% rename from src/libs/isNumberAllowedKey.ts rename to src/utils/isNumberAllowedKey.ts diff --git a/src/libs/isTextOverFlow.ts b/src/utils/isTextOverFlow.ts similarity index 100% rename from src/libs/isTextOverFlow.ts rename to src/utils/isTextOverFlow.ts diff --git a/src/libs/manageCookie.ts b/src/utils/manageCookie.ts similarity index 100% rename from src/libs/manageCookie.ts rename to src/utils/manageCookie.ts diff --git a/src/libs/renderPaymentProductName.ts b/src/utils/renderPaymentProductName.ts similarity index 100% rename from src/libs/renderPaymentProductName.ts rename to src/utils/renderPaymentProductName.ts diff --git a/src/libs/searchParamsToObject.ts b/src/utils/searchParamsToObject.ts similarity index 100% rename from src/libs/searchParamsToObject.ts rename to src/utils/searchParamsToObject.ts diff --git a/src/libs/sortAddressesByDefault.ts b/src/utils/sortAddressesByDefault.ts similarity index 100% rename from src/libs/sortAddressesByDefault.ts rename to src/utils/sortAddressesByDefault.ts diff --git a/src/libs/unFormatNumber.ts b/src/utils/unFormatNumber.ts similarity index 100% rename from src/libs/unFormatNumber.ts rename to src/utils/unFormatNumber.ts diff --git a/src/libs/unFormatPhoneNumber.ts b/src/utils/unFormatPhoneNumber.ts similarity index 100% rename from src/libs/unFormatPhoneNumber.ts rename to src/utils/unFormatPhoneNumber.ts diff --git a/src/libs/wheelUtils.ts b/src/utils/wheelUtils.ts similarity index 100% rename from src/libs/wheelUtils.ts rename to src/utils/wheelUtils.ts From abf4e2f45ad3b81b1e8b850d7e6fdc06db2b1a38 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=80=E1=85=B5=E1=86=B7=E1=84=87=E1=85=A9=E1=84=80?= =?UTF-8?q?=E1=85=A7=E1=86=BC?= Date: Sun, 24 Nov 2024 19:32:19 +0900 Subject: [PATCH 2/2] =?UTF-8?q?Refactor:=20prefetch=20=EB=A1=9C=EC=A7=81?= =?UTF-8?q?=20=EA=B0=9C=EC=84=A0=20=EB=B0=8F=20=EC=9D=B8=EC=8A=A4=ED=84=B4?= =?UTF-8?q?=EC=8A=A4=20=EC=83=9D=EC=84=B1=20fix?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 4 +- package.json | 2 +- src/app/community/page.tsx | 6 +- src/app/custom-keyboard/layout.tsx | 3 +- src/app/event/layout.tsx | 10 +-- src/app/layout.tsx | 22 +++--- src/app/my-info/layout.tsx | 67 +++++++---------- src/app/order-info/page.tsx | 14 ++-- .../payment/(paymentResult)/success/page.tsx | 8 +- src/app/payment/layout.tsx | 10 +-- src/app/payment/page.tsx | 12 +-- src/app/providers.tsx | 2 +- src/app/search/page.tsx | 4 +- .../_components/Product/ProductDetail.tsx | 7 +- src/constants/queryKey.ts | 29 +++++++- src/libs/{tanstackQuery => }/client.ts | 0 src/libs/prefetchers.ts | 74 +++++++++++++++++++ 17 files changed, 181 insertions(+), 93 deletions(-) rename src/libs/{tanstackQuery => }/client.ts (100%) create mode 100644 src/libs/prefetchers.ts diff --git a/package-lock.json b/package-lock.json index d3ca2c7a..7158a6c9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,6 @@ "@react-three/drei": "^9.106.0", "@react-three/fiber": "^8.16.7", "@tanstack/react-query": "^5.37.1", - "@tanstack/react-query-devtools": "^5.37.1", "@tosspayments/tosspayments-sdk": "^2.2.0", "aos": "^3.0.0-beta.6", "classnames": "^2.5.1", @@ -48,6 +47,7 @@ "@storybook/react": "^8.1.6", "@storybook/test": "^8.1.6", "@svgr/webpack": "^8.1.0", + "@tanstack/react-query-devtools": "^5.37.1", "@types/event-source-polyfill": "^1.0.5", "@types/node": "^20", "@types/react": "^18", @@ -5679,6 +5679,7 @@ "version": "5.37.1", "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.37.1.tgz", "integrity": "sha512-XcG4IIHIv0YQKrexTqo2zogQWR1Sz672tX2KsfE9kzB+9zhx44vRKH5si4WDILE1PIWQpStFs/NnrDQrBAUQpg==", + "dev": true, "funding": { "type": "github", "url": "https://github.com/sponsors/tannerlinsley" @@ -5703,6 +5704,7 @@ "version": "5.37.1", "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.37.1.tgz", "integrity": "sha512-fWL3rV/avL9HsHt3RVYxuLCqSHghBwSGPIUMDZ9hfg9PDjQaeI9d8kJj6yLoCBWUhTue5/rQbISvFtr+yxyYyA==", + "dev": true, "dependencies": { "@tanstack/query-devtools": "5.37.1" }, diff --git a/package.json b/package.json index a4112ddd..311b1550 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,6 @@ "@react-three/drei": "^9.106.0", "@react-three/fiber": "^8.16.7", "@tanstack/react-query": "^5.37.1", - "@tanstack/react-query-devtools": "^5.37.1", "@tosspayments/tosspayments-sdk": "^2.2.0", "aos": "^3.0.0-beta.6", "classnames": "^2.5.1", @@ -44,6 +43,7 @@ "zustand": "^4.5.5" }, "devDependencies": { + "@tanstack/react-query-devtools": "^5.37.1", "@chromatic-com/storybook": "^1.4.0", "@storybook/addon-essentials": "^8.1.6", "@storybook/addon-interactions": "^8.1.6", diff --git a/src/app/community/page.tsx b/src/app/community/page.tsx index 408ea9b4..5c148d4e 100644 --- a/src/app/community/page.tsx +++ b/src/app/community/page.tsx @@ -1,8 +1,9 @@ import { getAllCommunityPost } from '@/api/communityAPI'; import Pagination from '@/components/Pagination/Pagination'; import type { CommunityParamsType, CommunityPostListResponse } from '@/types/communityType'; -import { QueryClient, dehydrate, HydrationBoundary } from '@tanstack/react-query'; +import { dehydrate, HydrationBoundary } from '@tanstack/react-query'; import { fetchQueryBonding } from '@/utils/fetchQueryBounding'; +import { getQueryClient } from '@/libs/client'; import CommunityEmptyCase from './_components/CommunityEmptyCase'; import PostCardList from './_components/PostCardList'; @@ -17,8 +18,7 @@ export default async function CommunityPage({ searchParams }: CommunityPageProps size: searchParams.size || '16', }; - const queryClient = new QueryClient(); - + const queryClient = getQueryClient(); const posts = await fetchQueryBonding(queryClient, { queryKey: ['postCardsList'], queryFn: () => getAllCommunityPost(initialParams), diff --git a/src/app/custom-keyboard/layout.tsx b/src/app/custom-keyboard/layout.tsx index c2c37e1b..6f86ecca 100644 --- a/src/app/custom-keyboard/layout.tsx +++ b/src/app/custom-keyboard/layout.tsx @@ -1,7 +1,8 @@ import { FocusKeyContextProvider, KeyboardDataContextProvider, StepContextProvider } from '@/context'; +import { PropsWithChildren } from 'react'; import EventProvider from './EventProvider'; -export default function Layout({ children }: { children: React.ReactNode }) { +export default function Layout({ children }: PropsWithChildren) { return ( diff --git a/src/app/event/layout.tsx b/src/app/event/layout.tsx index f1ce9801..af5be154 100644 --- a/src/app/event/layout.tsx +++ b/src/app/event/layout.tsx @@ -1,16 +1,16 @@ -import { HydrationBoundary, QueryClient, dehydrate } from '@tanstack/react-query'; +import { HydrationBoundary, dehydrate } from '@tanstack/react-query'; import { ReactNode } from 'react'; -import { getCoupon } from '@/api/couponAPI'; +import { getQueryClient } from '@/libs/client'; +import { prefetchCouponsQuery } from '@/libs/prefetchers'; interface EventLayoutProps { children: ReactNode; } export default async function EventPageLayout({ children }: EventLayoutProps) { - const queryClient = new QueryClient(); - - await queryClient.prefetchQuery({ queryKey: ['coupons'], queryFn: getCoupon }); + const queryClient = getQueryClient(); + await prefetchCouponsQuery(queryClient); return ( diff --git a/src/app/layout.tsx b/src/app/layout.tsx index d6c96aed..82f8615c 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,17 +1,18 @@ import { GoogleTagManager } from '@next/third-parties/google'; -import { HydrationBoundary, QueryClient, dehydrate } from '@tanstack/react-query'; +import { HydrationBoundary, dehydrate } from '@tanstack/react-query'; import classNames from 'classnames/bind'; import type { Metadata } from 'next'; import Script from 'next/script'; import { ReactNode } from 'react'; -import { getAlarm } from '@/api/alarmAPI'; -import { getCartData } from '@/api/cartAPI'; import { getUserData } from '@/api/usersAPI'; import { Footer, Header } from '@/components'; import { fetchQueryBonding } from '@/utils/fetchQueryBounding'; import { getCookie } from '@/utils/manageCookie'; +import { prefetchCartDataQuery, prefetchCommunityAlarmQuery } from '@/libs/prefetchers'; import { pretendard } from '@/public/fonts/pretendard'; +import { getQueryClient } from '@/libs/client'; +import { QUERY_KEYS } from '@/constants/queryKey'; import { Providers } from './providers'; import '@/styles/reset.css'; @@ -35,18 +36,17 @@ export default async function RootLayout({ }: Readonly<{ children: ReactNode; }>) { - const queryClient = new QueryClient(); - const entireQueryClient = new QueryClient(); + const queryClient = getQueryClient(); const accessToken = await getCookie('accessToken'); if (accessToken) { const userData = await fetchQueryBonding(queryClient, { - queryKey: ['userData'], + queryKey: QUERY_KEYS.USER.DATA, queryFn: getUserData, }); if (!userData?.data) { - await queryClient.prefetchQuery({ queryKey: ['communityAlarm'], queryFn: getAlarm, retry: false }); - await entireQueryClient.prefetchQuery({ queryKey: ['cartData'], queryFn: getCartData, retry: false }); + await prefetchCommunityAlarmQuery(queryClient); + await prefetchCartDataQuery(queryClient); } } @@ -55,11 +55,9 @@ export default async function RootLayout({ - +
- -
- +
{children}
diff --git a/src/app/my-info/layout.tsx b/src/app/my-info/layout.tsx index f61471dc..1363e09d 100644 --- a/src/app/my-info/layout.tsx +++ b/src/app/my-info/layout.tsx @@ -1,62 +1,45 @@ -import { HydrationBoundary, QueryClient, dehydrate } from '@tanstack/react-query'; +import { HydrationBoundary, dehydrate } from '@tanstack/react-query'; import classNames from 'classnames/bind'; -import { ReactNode } from 'react'; +import { PropsWithChildren } from 'react'; -import { POST_PARAMS, LIKE_PARAMS, MY_REVIEW_PARAMS } from '@/constants/initialParams'; -import { getOrdersData } from '@/api/orderAPI'; -import { getAddresses } from '@/api/shippingAPI'; import { getUserData } from '@/api/usersAPI'; -import { getCartData } from '@/api/cartAPI'; -import { getCoupon } from '@/api/couponAPI'; -import { getMyPosts } from '@/api/communityAPI'; -import { getProductLikes } from '@/api/likesAPI'; -import { getUserProductReviews } from '@/api/productReviewAPI'; import { fetchQueryBonding } from '@/utils/fetchQueryBounding'; -import { formatDateToQueryString } from '@/utils/formatDateToQueryString'; import type { UserDataResponseType } from '@/types/userType'; import { UserRouteProvider } from '@/components'; +import { getQueryClient } from '@/libs/client'; +import { + prefetchAddressQuery, + prefetchCartDataQuery, + prefetchCouponsQuery, + prefetchLikelistsQuery, + prefetchOrdersQuery, + prefetchProductReviewsQuery, + prefetchReviewQuery, +} from '@/libs/prefetchers'; +import { QUERY_KEYS } from '@/constants/queryKey'; import { SNB } from './_components'; import styles from './layout.module.scss'; const cn = classNames.bind(styles); -interface MyInfoLayoutProps { - children: ReactNode; -} - -export default async function MyInfoLayout({ children }: MyInfoLayoutProps) { - const queryClient = new QueryClient(); +export default async function MyInfoLayout({ children }: PropsWithChildren) { + const queryClient = getQueryClient(); const userData = await fetchQueryBonding(queryClient, { - queryKey: ['userData'], + queryKey: QUERY_KEYS.USER.DATA, queryFn: getUserData, }); if (userData?.data) { - await queryClient.prefetchQuery({ queryKey: ['addressesData'], queryFn: getAddresses }); - await queryClient.prefetchQuery({ - queryKey: ['ordersResponse'], - queryFn: () => getOrdersData({ page: 0, size: 100, startDate: null, endDate: null }), - }); - await queryClient.prefetchQuery({ queryKey: ['cartData'], queryFn: getCartData }); - await queryClient.prefetchQuery({ queryKey: ['coupons'], queryFn: getCoupon }); - await queryClient.prefetchQuery({ - queryKey: ['myCustomReview', POST_PARAMS], - queryFn: () => getMyPosts(POST_PARAMS), - }); - await queryClient.prefetchQuery({ - queryKey: ['like', 'lists', LIKE_PARAMS], - queryFn: () => getProductLikes(LIKE_PARAMS), - }); - await queryClient.prefetchQuery({ - queryKey: ['userProductReviews'], - queryFn: () => - getUserProductReviews({ - startDate: formatDateToQueryString('start', new Date()), - endDate: formatDateToQueryString('end', new Date()), - ...MY_REVIEW_PARAMS, - }), - }); + await Promise.all([ + prefetchAddressQuery(queryClient), + prefetchOrdersQuery(queryClient), + prefetchCartDataQuery(queryClient), + prefetchCouponsQuery(queryClient), + prefetchReviewQuery(queryClient), + prefetchLikelistsQuery(queryClient), + prefetchProductReviewsQuery(queryClient), + ]); } return ( diff --git a/src/app/order-info/page.tsx b/src/app/order-info/page.tsx index f944df27..c666bd79 100644 --- a/src/app/order-info/page.tsx +++ b/src/app/order-info/page.tsx @@ -1,10 +1,12 @@ -import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query'; +import { dehydrate, HydrationBoundary } from '@tanstack/react-query'; import classNames from 'classnames/bind'; -import { getOrder } from '@/api/orderAPI'; import { getUserData } from '@/api/usersAPI'; import { fetchQueryBonding } from '@/utils/fetchQueryBounding'; import { UserRouteProvider } from '@/components'; +import { QUERY_KEYS } from '@/constants/queryKey'; +import { getQueryClient } from '@/libs/client'; +import { prefetchOrderQuery } from '@/libs/prefetchers'; import OrderDetail from './_components/OrderDetail'; import styles from './page.module.scss'; @@ -17,13 +19,11 @@ interface OrderInfoPageProps { export default async function OrderInfoPage({ searchParams }: OrderInfoPageProps) { const { orderId } = searchParams; - const queryClient = new QueryClient(); + const queryClient = getQueryClient(); - const userData = await fetchQueryBonding(queryClient, { queryKey: ['userData'], queryFn: getUserData }); + const userData = await fetchQueryBonding(queryClient, { queryKey: QUERY_KEYS.USER.DATA, queryFn: getUserData }); - if (userData?.data) { - await queryClient.prefetchQuery({ queryKey: ['orderResponse', orderId], queryFn: () => getOrder(orderId) }); - } + if (userData?.data) await prefetchOrderQuery(queryClient, orderId); return ( diff --git a/src/app/payment/(paymentResult)/success/page.tsx b/src/app/payment/(paymentResult)/success/page.tsx index bc78f9e8..28168f45 100644 --- a/src/app/payment/(paymentResult)/success/page.tsx +++ b/src/app/payment/(paymentResult)/success/page.tsx @@ -1,8 +1,10 @@ import { getUserData } from '@/api/usersAPI'; import { ROUTER } from '@/constants/route'; -import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query'; +import { dehydrate, HydrationBoundary } from '@tanstack/react-query'; import { redirect } from 'next/navigation'; import { fetchQueryBonding } from '@/utils/fetchQueryBounding'; +import { QUERY_KEYS } from '@/constants/queryKey'; +import { getQueryClient } from '@/libs/client'; import CheckoutNavigation from '../../_components/CheckoutNavigation/CheckoutNavigation'; import CheckoutCompleted from './_components/CheckoutCompleted'; @@ -11,10 +13,10 @@ interface SuccessPageProps { } export default async function PaymentSuccessPage({ searchParams }: SuccessPageProps) { - const queryClient = new QueryClient(); + const queryClient = getQueryClient(); const { orderId } = searchParams; - const userData = await fetchQueryBonding(queryClient, { queryKey: ['userData'], queryFn: getUserData }); + const userData = await fetchQueryBonding(queryClient, { queryKey: QUERY_KEYS.USER.DATA, queryFn: getUserData }); if (!userData) { redirect(ROUTER.MAIN); diff --git a/src/app/payment/layout.tsx b/src/app/payment/layout.tsx index a6ddde51..2f0f1a6d 100644 --- a/src/app/payment/layout.tsx +++ b/src/app/payment/layout.tsx @@ -1,10 +1,11 @@ -import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query'; +import { dehydrate, HydrationBoundary } from '@tanstack/react-query'; import classNames from 'classnames/bind'; import { ReactNode } from 'react'; -import { getUserData } from '@/api/usersAPI'; import { UserRouteProvider } from '@/components'; +import { getQueryClient } from '@/libs/client'; +import { prefetchUserQuery } from '@/libs/prefetchers'; import styles from './layout.module.scss'; const cn = classNames.bind(styles); @@ -14,9 +15,8 @@ interface CheckoutLayoutProps { } export default async function PaymentPageLayout({ children }: CheckoutLayoutProps) { - const queryClient = new QueryClient(); - - await queryClient.prefetchQuery({ queryKey: ['userData'], queryFn: getUserData }); + const queryClient = getQueryClient(); + await prefetchUserQuery(queryClient); return ( diff --git a/src/app/payment/page.tsx b/src/app/payment/page.tsx index 317668b8..bc4a4a62 100644 --- a/src/app/payment/page.tsx +++ b/src/app/payment/page.tsx @@ -1,7 +1,7 @@ -import { getPayment } from '@/api/orderAPI'; -import { getAddresses } from '@/api/shippingAPI'; -import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query'; +import { dehydrate, HydrationBoundary } from '@tanstack/react-query'; import { redirect } from 'next/navigation'; +import { getQueryClient } from '@/libs/client'; +import { prefetchAddressQuery, prefetchPaymentQuery } from '@/libs/prefetchers'; import CheckoutForm from './_components/CheckoutForm/CheckoutForm'; import CheckoutNavigation from './_components/CheckoutNavigation/CheckoutNavigation'; @@ -10,15 +10,15 @@ interface PaymentPageProps { } export default async function PaymentPage({ searchParams }: PaymentPageProps) { - const queryClient = new QueryClient(); + const queryClient = getQueryClient(); const { orderId } = searchParams; if (!orderId) { redirect('/not-found'); } - await queryClient.prefetchQuery({ queryKey: ['paymentResponse', orderId], queryFn: () => getPayment(orderId) }); - await queryClient.prefetchQuery({ queryKey: ['addressesData'], queryFn: getAddresses }); + await prefetchPaymentQuery(queryClient, orderId); + await prefetchAddressQuery(queryClient); return ( diff --git a/src/app/providers.tsx b/src/app/providers.tsx index 6d6c3536..3953508b 100644 --- a/src/app/providers.tsx +++ b/src/app/providers.tsx @@ -5,9 +5,9 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import classNames from 'classnames/bind'; import { PropsWithChildren, useRef } from 'react'; +import { getQueryClient } from '@/libs/client'; import { ScrollUpButton } from '@/components'; import { ToastContainer, Zoom } from 'react-toastify'; -import { getQueryClient } from '@/libs/tanstackQuery/client'; import AOSWrapper from './_components/Aos/AOSWrapper'; import AdvertisePanel from './event/_components/AdvertisePanel'; diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx index 16960b7a..4587b5fb 100644 --- a/src/app/search/page.tsx +++ b/src/app/search/page.tsx @@ -1,4 +1,3 @@ -import { QueryClient } from '@tanstack/react-query'; import classNames from 'classnames/bind'; import { redirect } from 'next/navigation'; @@ -6,6 +5,7 @@ import { getSearchResult } from '@/api/searchAPI'; import { Pagination, SearchBox } from '@/components'; import { ROUTER } from '@/constants/route'; import type { SearchResultType } from '@/types/searchType'; +import { getQueryClient } from '@/libs/client'; import { CardList, NoResult } from './_components'; import styles from './page.module.scss'; @@ -17,7 +17,7 @@ interface SearchPageProps { } export default async function SearchPage({ searchParams }: SearchPageProps) { - const queryClient = new QueryClient(); + const queryClient = getQueryClient(); const { keyword = '', page = 0 } = searchParams; diff --git a/src/app/shop/[category]/[productId]/_components/Product/ProductDetail.tsx b/src/app/shop/[category]/[productId]/_components/Product/ProductDetail.tsx index 44b705c3..71b3ca11 100644 --- a/src/app/shop/[category]/[productId]/_components/Product/ProductDetail.tsx +++ b/src/app/shop/[category]/[productId]/_components/Product/ProductDetail.tsx @@ -2,10 +2,11 @@ import { getProductDetail } from '@/api/productAPI'; import { HeartButton, Rating } from '@/components'; import ShareButton from '@/components/Buttons/ShareButton/ShareButton'; import { ROUTER } from '@/constants/route'; -import { QueryClient } from '@tanstack/react-query'; import classNames from 'classnames/bind'; import { redirect } from 'next/navigation'; import { fetchQueryBonding } from '@/utils/fetchQueryBounding'; +import { getQueryClient } from '@/libs/client'; +import { QUERY_KEYS } from '@/constants/queryKey'; import OptionWithButton from './OptionWithButtons'; import styles from './ProductDetail.module.scss'; import Thumbnail from './Thumbnail'; @@ -27,9 +28,9 @@ const POINT_TEXT = { }; export default async function ProductDetail({ productId }: ProductDetailProps) { - const queryClient = new QueryClient(); + const queryClient = getQueryClient(); const productData = await fetchQueryBonding(queryClient, { - queryKey: ['product', productId], + queryKey: QUERY_KEYS.PRODUCT.DETAIL(productId), queryFn: () => getProductDetail(productId), }); diff --git a/src/constants/queryKey.ts b/src/constants/queryKey.ts index 597ec191..cfe54c25 100644 --- a/src/constants/queryKey.ts +++ b/src/constants/queryKey.ts @@ -1,11 +1,38 @@ +import { LIKE_PARAMS, POST_PARAMS } from './initialParams'; + export const QUERY_KEYS = { PRODUCT: { ALL: ['all'], LISTS: () => [...QUERY_KEYS.PRODUCT.ALL, 'lists'], LIST: (filter: string) => [...QUERY_KEYS.PRODUCT.LISTS(), filter], + DETAIL: (productId: number) => ['product', productId], }, LIKE: { ALL: ['likes'], - LISTS: () => [...QUERY_KEYS.LIKE.ALL, 'lists'], + LISTS: (params = LIKE_PARAMS) => [...QUERY_KEYS.LIKE.ALL, 'lists', params], // 좋아요 목록 + }, + USER: { + DATA: ['userData'], + PRODUCT_REVIEWS: ['userProductReviews'], // 사용자 상품 리뷰 + }, + COMMUNITY: { + ALARM: ['communityAlarm'], + POSTS: (params = POST_PARAMS) => ['myCustomReview', params], // 커뮤니티 포스트 + }, + CART: { + DATA: ['cartData'], + }, + COUPON: { + ALL: ['coupons'], + }, + ADDRESS: { + ALL: ['addressesData'], + }, + ORDER: { + ALL: ['ordersResponse'], + DETAIL: (orderId: string) => ['orderResponse', orderId], + }, + PAYMENT: { + DETAIL: (orderId: string) => ['paymentResponse', orderId], }, }; diff --git a/src/libs/tanstackQuery/client.ts b/src/libs/client.ts similarity index 100% rename from src/libs/tanstackQuery/client.ts rename to src/libs/client.ts diff --git a/src/libs/prefetchers.ts b/src/libs/prefetchers.ts new file mode 100644 index 00000000..4d6c6b74 --- /dev/null +++ b/src/libs/prefetchers.ts @@ -0,0 +1,74 @@ +import { getAlarm } from '@/api/alarmAPI'; +import { getCartData } from '@/api/cartAPI'; +import { getMyPosts } from '@/api/communityAPI'; +import { getCoupon } from '@/api/couponAPI'; +import { getProductLikes } from '@/api/likesAPI'; +import { getOrder, getOrdersData, getPayment } from '@/api/orderAPI'; +import { getUserProductReviews } from '@/api/productReviewAPI'; +import { getAddresses } from '@/api/shippingAPI'; +import { getUserData } from '@/api/usersAPI'; +import { LIKE_PARAMS, MY_REVIEW_PARAMS, POST_PARAMS } from '@/constants/initialParams'; +import { QUERY_KEYS } from '@/constants/queryKey'; +import { formatDateToQueryString } from '@/utils/formatDateToQueryString'; +import { QueryClient } from '@tanstack/react-query'; + +export const prefetchUserQuery = async (queryClient: QueryClient) => { + await queryClient.prefetchQuery({ queryKey: QUERY_KEYS.USER.DATA, queryFn: getUserData }); +}; + +export const prefetchCommunityAlarmQuery = async (queryClient: QueryClient) => { + await queryClient.prefetchQuery({ queryKey: QUERY_KEYS.COMMUNITY.ALARM, queryFn: getAlarm, retry: false }); +}; + +export const prefetchCartDataQuery = async (queryClient: QueryClient) => { + await queryClient.prefetchQuery({ queryKey: QUERY_KEYS.CART.DATA, queryFn: getCartData, retry: false }); +}; + +export const prefetchCouponsQuery = async (queryClient: QueryClient) => { + await queryClient.prefetchQuery({ queryKey: QUERY_KEYS.COUPON.ALL, queryFn: getCoupon }); +}; + +export const prefetchAddressQuery = async (queryClient: QueryClient) => { + await queryClient.prefetchQuery({ queryKey: QUERY_KEYS.ADDRESS.ALL, queryFn: getAddresses }); +}; + +export const prefetchOrdersQuery = async (queryClient: QueryClient) => { + await queryClient.prefetchQuery({ + queryKey: QUERY_KEYS.ORDER.ALL, + queryFn: () => getOrdersData({ page: 0, size: 100, startDate: null, endDate: null }), + }); +}; + +export const prefetchOrderQuery = async (queryClient: QueryClient, orderId: string) => { + await queryClient.prefetchQuery({ queryKey: QUERY_KEYS.ORDER.DETAIL(orderId), queryFn: () => getOrder(orderId) }); +}; + +export const prefetchReviewQuery = async (queryClient: QueryClient) => { + await queryClient.prefetchQuery({ + queryKey: QUERY_KEYS.COMMUNITY.POSTS(), + queryFn: () => getMyPosts(POST_PARAMS), + }); +}; + +export const prefetchLikelistsQuery = async (queryClient: QueryClient) => { + await queryClient.prefetchQuery({ + queryKey: QUERY_KEYS.LIKE.LISTS(), + queryFn: () => getProductLikes(LIKE_PARAMS), + }); +}; + +export const prefetchProductReviewsQuery = async (queryClient: QueryClient) => { + await queryClient.prefetchQuery({ + queryKey: QUERY_KEYS.USER.PRODUCT_REVIEWS, + queryFn: () => + getUserProductReviews({ + startDate: formatDateToQueryString('start', new Date()), + endDate: formatDateToQueryString('end', new Date()), + ...MY_REVIEW_PARAMS, + }), + }); +}; + +export const prefetchPaymentQuery = async (queryClient: QueryClient, orderId: string) => { + await queryClient.prefetchQuery({ queryKey: QUERY_KEYS.PAYMENT.DETAIL(orderId), queryFn: () => getPayment(orderId) }); +};