[Refactor] ssr 로직 분리 및 같은 인스턴스를 참조하도록 수정

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",

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<T> {

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;

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';

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';
 

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';
 

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';

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';

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';

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';

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';
 

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 { fetchQueryBonding } from '@/libs/fetchQueryBounding';
+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<CommunityPostListResponse | null>(queryClient, {
     queryKey: ['postCardsList'],
     queryFn: () => getAllCommunityPost(initialParams),

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';

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,

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 (
     <StepContextProvider>
       <KeyboardDataContextProvider>

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';

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';

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 (
     <HydrationBoundary state={dehydrate(queryClient)}>

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 '@/libs/fetchQueryBounding';
-import { getCookie } from '@/libs/manageCookie';
+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({
       <GoogleTagManager gtmId='GTM-T3C6DZC6' />
       <body>
         <Providers>
-          <HydrationBoundary state={dehydrate(entireQueryClient)}>
+          <HydrationBoundary state={dehydrate(queryClient)}>
             <div className={cn('wrapper')}>
-              <HydrationBoundary state={dehydrate(queryClient)}>
-                <Header />
-              </HydrationBoundary>
+              <Header />
               <div className={cn('content-wrapper')}> {children}</div>
               <Footer />
             </div>

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';

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';
 

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';
 

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';

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';
 

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';

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';

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';
 

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';