Revert "Revert "배포용 pr""

Author: woobottle

next.config.js

@@ -1,3 +1,4 @@
+9;
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   experimental: {
@@ -11,6 +12,11 @@ const nextConfig = {
         hostname: 'kr.object.ncloudstorage.com',
         port: '',
       },
+      {
+        protocol: 'https',
+        hostname: 'image.10mm.today',
+        port: '',
+      },
     ],
   },
 };

src/apis/createQueryKeyFactory.ts

@@ -1,5 +1,20 @@
 type QueryList = {
-  //
+  missions: undefined;
+  missionDetail: {
+    missionId: string;
+  };
+
+  record: {
+    missionId: number;
+    yearMonth: string;
+  };
+  recordDetail: {
+    recordId: string;
+  };
+
+  member: {
+    me: undefined;
+  };
 };
 
 /**
@@ -15,7 +30,7 @@ type QueryList = {
 const getQueryKey = <T extends keyof QueryList>(
   ...[key, params]: undefined extends QueryList[T] ? [T] : [T, QueryList[T]]
 ) => {
-  return params ? [key, params] : [key];
+  return params ? [key, ...Object.entries(params)] : [key];
 };
 
 export default getQueryKey;

src/hooks/query/getQueryKey.ts src/apis/getQueryKey.ts

@@ -1,3 +1,4 @@
+import getQueryKey from '@/apis/getQueryKey';
 import apiInstance from '@/apis/instance.api';
 import { type MemberType } from '@/apis/schema/member';
 import { type UploadBaseRequest, type UploadUrlBaseResponse } from '@/apis/schema/upload';
@@ -101,14 +102,14 @@ export const useUploadProfileImageComplete = (
     ...option,
     onSuccess: (...res) => {
       option?.onSuccess && option.onSuccess(...res);
-      return queryClient.invalidateQueries({ queryKey: ['member', 'me'] });
+      return queryClient.invalidateQueries({ queryKey: getQueryKey('member', { me: undefined }) });
     },
   });
 };
 
 export const useGetMembersMe = (option?: UseQueryOptions<MemberMeResponse>) => {
   return useQuery({
-    queryKey: ['member', 'me'],
+    queryKey: getQueryKey('member', { me: undefined }),
     queryFn: () => MEMBER_API.getMembersMe(),
     ...option,
   });

src/apis/member.ts

@@ -1,4 +1,4 @@
-import { createQueryKeyFactory } from '@/apis/createQueryKeyFactory';
+import getQueryKey from '@/apis/getQueryKey';
 import { type MissionCategory, type MissionItemTypeWithRecordId, type MissionVisibility } from '@/apis/schema/mission';
 import {
   useMutation,
@@ -81,23 +81,17 @@ interface ModifyMissionResponse {
   visibility: string;
 }
 
-const missionsQueryKey = ['missions'];
-
 export const useGetMissions = (option?: UseQueryOptions<GetMissionsResponse>) => {
   return useQuery<GetMissionsResponse>({
-    queryKey: missionsQueryKey,
+    queryKey: getQueryKey('missions'),
     queryFn: MISSION_APIS.getMissions,
     ...option,
   });
 };
 
-const getMissionDetailQueryKey = createQueryKeyFactory<{
-  missionId: string;
-}>('missionDetail');
-
 export const useGetMissionDetail = (missionId: string, option?: UseQueryOptions<MissionContentType>) => {
   return useSuspenseQuery<MissionContentType>({
-    queryKey: getMissionDetailQueryKey({ missionId }),
+    queryKey: getQueryKey('missionDetail', { missionId }),
     queryFn: () => MISSION_APIS.getMissionDetail(missionId),
     ...option,
   });
@@ -108,7 +102,7 @@ export const useGetMissionDetailNoSuspense = (
   option?: Omit<UseQueryOptions<MissionContentType>, 'enabled'>, // TODO 수정 필요, 임시 방편
 ) => {
   return useQuery<MissionContentType>({
-    queryKey: getMissionDetailQueryKey({ missionId }),
+    queryKey: getQueryKey('missionDetail', { missionId }),
     queryFn: () => MISSION_APIS.getMissionDetail(missionId),
     enabled: Boolean(missionId),
     ...option,
@@ -130,7 +124,7 @@ export const useDeleteMissionMutation = (missionId: string, option?: UseMutation
   return useMutation({
     mutationFn: () => MISSION_APIS.deleteMission(missionId),
     onSuccess: async (...data) => {
-      await queryClient.invalidateQueries({ queryKey: missionsQueryKey });
+      await queryClient.invalidateQueries({ queryKey: getQueryKey('missions') });
       option?.onSuccess?.(...data);
     },
     ...option,

src/apis/mission.ts

@@ -1,4 +1,4 @@
-import { createQueryKeyFactory } from '@/apis/createQueryKeyFactory';
+import getQueryKey from '@/apis/getQueryKey';
 import { type RecordType } from '@/apis/schema/record';
 import { type UploadBaseRequest } from '@/apis/schema/upload';
 import {
@@ -86,19 +86,17 @@ const RECORD_API = {
 
 export default RECORD_API;
 
-const getRecordQueryKey = createQueryKeyFactory<GetRecordsParams>('record');
-
 export const useGetRecord = (params: GetRecordsParams, option?: UseQueryOptions<GetRecordsResponse>) => {
   return useQuery({
-    queryKey: getRecordQueryKey(params),
+    queryKey:  getQueryKey('record', params),
     queryFn: () => RECORD_API.getRecords(params),
     ...option,
   });
 };
 
 export const useGetRecordDetail = (recordId: string, option?: UseQueryOptions<GetRecordDetailResponse>) => {
   return useSuspenseQuery({
-    queryKey: ['recordDetail', recordId],
+    queryKey: getQueryKey('recordDetail', { recordId }),
     queryFn: () => RECORD_API.getRecordDetail(recordId),
 
     ...option,

src/apis/record.ts

@@ -10,7 +10,7 @@ function ProfileContent({ nickname, profileUrl }: { nickname: string; profileUrl
     <section className={containerCss}>
       <Link href={ROUTER.MYPAGE.PROFILE_MODIFY}>
         <div className={profileWrapperCss}>
-          <Thumbnail size={'h52'} variant={'filled'} url={addDummyQuery(profileUrl)} />
+          <Thumbnail size={'h52'} variant={'filled'} url={profileUrl} />
           <p className={nicknameCss}>{nickname}</p>
           <Icon name="arrow-forward" width={16} height={16} color="icon.secondary" />
         </div>
@@ -48,8 +48,3 @@ const nicknameCss = css({
   minWidth: '0',
   whiteSpace: 'nowrap',
 });
-
-const addDummyQuery = (url?: string) => {
-  if (!url) return '';
-  return `${url}?dummy=${Math.random()}`;
-};

src/app/mypage/ProfileContent.tsx

@@ -106,7 +106,6 @@ function ProfileModifyPage() {
           validMsg={massageState.validMsg}
           onTextButtonClick={handleDuplicateCheck}
         />
-        ;
       </main>
     </>
   );

src/app/mypage/profile_modify/page.tsx

@@ -1,2 +1 @@
 export { default as QueryProvider } from './QueryProvider';
-export { default as getQueryKey } from './getQueryKey';