Merge pull request #360 from depromeet/revert-359-develop

Revert "배포용 pr"

Author: JUNOSHON

next.config.js

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

src/apis/createQueryKeyFactory.ts

@@ -0,0 +1,5 @@
+export const createQueryKeyFactory = <T extends Record<string, unknown>>(queryKey: string) => {
+  return (params: T) => {
+    return [queryKey, ...Object.values(params)];
+  };
+};

src/apis/member.ts

@@ -1,4 +1,3 @@
-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';
@@ -102,14 +101,14 @@ export const useUploadProfileImageComplete = (
     ...option,
     onSuccess: (...res) => {
       option?.onSuccess && option.onSuccess(...res);
-      return queryClient.invalidateQueries({ queryKey: getQueryKey('member', { me: undefined }) });
+      return queryClient.invalidateQueries({ queryKey: ['member', 'me'] });
     },
   });
 };
 
 export const useGetMembersMe = (option?: UseQueryOptions<MemberMeResponse>) => {
   return useQuery({
-    queryKey: getQueryKey('member', { me: undefined }),
+    queryKey: ['member', 'me'],
     queryFn: () => MEMBER_API.getMembersMe(),
     ...option,
   });

src/apis/mission.ts

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

src/apis/record.ts

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

src/app/mypage/ProfileContent.tsx

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

src/app/mypage/profile_modify/page.tsx

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

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

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

src/hooks/query/index.ts

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