Fix(client): User query 통합 및 게시글 수정 페이지 권한 가드

apps/client/src/pages/community/community-edit/loader.ts

@@ -0,0 +1,27 @@
+import { LoaderFunctionArgs, redirect } from 'react-router';
+
+import { isPostAuthor } from '@widgets/community/utils/is-post-author';
+
+import { COMMUNITY_QUERY_OPTIONS } from '@shared/api/domain/community/queries';
+import { USER_QUERY_OPTIONS } from '@shared/api/domain/queries';
+import { routePath } from '@shared/router/path';
+import { queryClient } from '@shared/utils/query-client';
+
+export const communityEditLoader = async ({ params }: LoaderFunctionArgs) => {
+  const postId = params.postId;
+
+  if (!postId) {
+    throw new Error('글 수정 페이지에서 postId를 찾을 수 없습니다.');
+  }
+
+  const [feedDetailData, userData] = await Promise.all([
+    queryClient.ensureQueryData(COMMUNITY_QUERY_OPTIONS.FEED_DETAIL(postId)),
+    queryClient.ensureQueryData(USER_QUERY_OPTIONS.PROFILE()),
+  ]);
+
+  if (!isPostAuthor(feedDetailData?.writerId, userData?.data?.userId)) {
+    return redirect(routePath.COMMUNITY_DETAIL.replace(':postId', postId));
+  }
+
+  return null;
+};

apps/client/src/pages/home/home-page.tsx

@@ -8,7 +8,7 @@ import { FeaturesSection } from '@widgets/home/components/features-section/featu
 import { InfoSection } from '@widgets/home/components/info-section/info-section.tsx';
 import { RecommendedInfoSection } from '@widgets/home/components/info-section/recommended-info-section.tsx';
 
-import { HOME_QUERY_OPTIONS } from '@shared/api/domain/home/queries.ts';
+import { USER_QUERY_OPTIONS } from '@shared/api/domain/queries.ts';
 import { routePath } from '@shared/router/path.ts';
 
 import * as styles from './home-page.css.ts';
@@ -20,7 +20,7 @@ const HomePage = () => {
     navigate(path);
   };
 
-  const { data: userData } = useSuspenseQuery(HOME_QUERY_OPTIONS.USER_INFO());
+  const { data: userData } = useSuspenseQuery(USER_QUERY_OPTIONS.PROFILE());
 
   return (
     <section className={styles.homePage}>
@@ -41,9 +41,9 @@ const HomePage = () => {
           />
         }
       />
-      {userData?.isRecommendInsurance ? (
+      {userData?.data?.isRecommendInsurance ? (
         <>
-          <RecommendedInfoSection userName={userData?.username} />
+          <RecommendedInfoSection userName={userData?.data.username} />
           <FeaturesSection height={'md'} />
         </>
       ) : (

apps/client/src/pages/my/my-page.tsx

@@ -6,7 +6,7 @@ import { Icon } from '@bds/ui/icons';
 
 import Body from '@widgets/mypage/components/body/body';
 
-import { USER_QUERY_OPTIONS } from '@shared/api/domain/mypage/queries';
+import { USER_QUERY_OPTIONS } from '@shared/api/domain/queries';
 import { useNavigateTo } from '@shared/hooks/use-navigate-to';
 import { routePath } from '@shared/router/path';
 

apps/client/src/pages/onboarding/onboarding-page.tsx

@@ -24,9 +24,10 @@ import {
 import { buildSubmitPayload } from '@widgets/onboarding/utils/build-submit-payload';
 
 import {
+  INSURANCE_QUERY_OPTIONS,
   usePostUserInfo,
-  USER_QUERY_OPTIONS,
 } from '@shared/api/domain/onboarding/queries';
+import { USER_QUERY_OPTIONS } from '@shared/api/domain/queries';
 import { SwitchCase } from '@shared/components/switch-case';
 import { useFunnel } from '@shared/hooks/use-funnel';
 import { routePath } from '@shared/router/path';
@@ -69,12 +70,12 @@ const OnboardingPage = () => {
   const progressTotal = stepSlugs.filter((s) => !excluded.includes(s)).length;
 
   const { data: userData } = useSuspenseQuery(USER_QUERY_OPTIONS.PROFILE());
-  const { data: userJobs } = useSuspenseQuery(USER_QUERY_OPTIONS.JOBS());
+  const { data: userJobs } = useSuspenseQuery(INSURANCE_QUERY_OPTIONS.JOBS());
   const { data: userDiseases } = useSuspenseQuery(
-    USER_QUERY_OPTIONS.DISEASES(),
+    INSURANCE_QUERY_OPTIONS.DISEASES(),
   );
   const { data: userCoverages } = useSuspenseQuery(
-    USER_QUERY_OPTIONS.COVERAGES(),
+    INSURANCE_QUERY_OPTIONS.COVERAGES(),
   );
 
   const { mutate } = usePostUserInfo(() => {

apps/client/src/pages/report/report-page.tsx

@@ -7,10 +7,8 @@ import { Icon } from '@bds/ui/icons';
 import ReportDetail from '@widgets/report/components/report-detail/report-detail';
 import Summarize from '@widgets/report/components/summarize/summarize';
 
-import {
-  INSURANCE_QUERY_OPTIONS,
-  USER_QUERY_OPTIONS,
-} from '@shared/api/domain/report/queries';
+import { USER_QUERY_OPTIONS } from '@shared/api/domain/queries';
+import { INSURANCE_QUERY_OPTIONS } from '@shared/api/domain/report/queries';
 import { routePath } from '@shared/router/path';
 
 import * as styles from './report-page.css';

apps/client/src/shared/api/domain/home/queries.ts

@@ -2,8 +2,8 @@ import { queryOptions } from '@tanstack/react-query';
 
 import { END_POINT } from '@shared/api/config/end-point.ts';
 import { api } from '@shared/api/config/instance';
-import { HOME_QUERY_KEY, USER_QUERY_KEY } from '@shared/api/keys/query-key.ts';
-import { ReportSummaryRes, UserProfile } from '@shared/api/types/types';
+import { HOME_QUERY_KEY } from '@shared/api/keys/query-key.ts';
+import { ReportSummaryRes } from '@shared/api/types/types';
 
 export const HOME_QUERY_OPTIONS = {
   REPORT_SUMMARY: () => {
@@ -13,13 +13,6 @@ export const HOME_QUERY_OPTIONS = {
       select: (data: ReportSummaryRes | null) => data?.data,
     });
   },
-  USER_INFO: () => {
-    return queryOptions({
-      queryKey: USER_QUERY_KEY.PROFILE(),
-      queryFn: getUserProfile,
-      select: (data: UserProfile | null) => data?.data,
-    });
-  },
 };
 
 export const getReportSummary = async (): Promise<ReportSummaryRes | null> => {
@@ -28,10 +21,3 @@ export const getReportSummary = async (): Promise<ReportSummaryRes | null> => {
     .json<ReportSummaryRes>();
   return response;
 };
-
-export const getUserProfile = async (): Promise<UserProfile | null> => {
-  const response = await api
-    .get(END_POINT.USER.GET_USER_INFO)
-    .json<UserProfile>();
-  return response;
-};

apps/client/src/shared/api/domain/mypage/queries.ts

@@ -1,20 +1,16 @@
-import {
-  infiniteQueryOptions,
-  mutationOptions,
-  queryOptions,
-} from '@tanstack/react-query';
+import { infiniteQueryOptions, mutationOptions } from '@tanstack/react-query';
 
 import { END_POINT } from '@shared/api/config/end-point.ts';
 import { api } from '@shared/api/config/instance';
 import {
+  AUTH_MUTATION_KEY,
   USER_MUTATION_KEY,
   USER_QUERY_KEY,
 } from '@shared/api/keys/query-key.ts';
 import {
   KakaoLogoutResponse,
   KakaoWithdrawResponse,
   MePostResponse,
-  UserProfile,
   UserProfileEditRequestBody,
   UserProfileEditResponse,
 } from '@shared/api/types/types';
@@ -24,12 +20,6 @@ import {
 // =============================================================================
 
 export const USER_QUERY_OPTIONS = {
-  PROFILE: () =>
-    queryOptions({
-      queryKey: USER_QUERY_KEY.PROFILE(),
-      queryFn: getUserProfile,
-    }),
-
   ME_POSTS: () =>
     infiniteQueryOptions({
       queryKey: USER_QUERY_KEY.ME_POSTS(),
@@ -53,13 +43,6 @@ export const USER_QUERY_OPTIONS = {
 // QUERY FUNCTIONS
 // =============================================================================
 
-export const getUserProfile = async (): Promise<UserProfile | null> => {
-  const response = await api
-    .get(END_POINT.USER.GET_USER_INFO)
-    .json<UserProfile>();
-  return response;
-};
-
 export const getMePosts = async ({ pageParam }: { pageParam: number }) => {
   const url =
     pageParam === 0
@@ -85,32 +68,42 @@ export const getMeComments = async ({ pageParam }: { pageParam: number }) => {
 // =============================================================================
 
 export const USER_MUTATION_OPTIONS = {
+  PATCH_USER_PROFILE: () => {
+    return mutationOptions({
+      mutationKey: USER_MUTATION_KEY.USER_PROFILE(),
+      mutationFn: ({ body }: { body: UserProfileEditRequestBody }) =>
+        patchUserProfile(body),
+    });
+  },
+};
+
+export const AUTH_MUTATION_OPTIONS = {
   KAKAO_LOGOUT: () => {
     return mutationOptions({
-      mutationKey: USER_QUERY_KEY.KAKAO_LOGOUT(),
+      mutationKey: AUTH_MUTATION_KEY.KAKAO_LOGOUT(),
       mutationFn: kakaoLogout,
     });
   },
 
   KAKAO_WITHDRAW: () => {
     return mutationOptions({
-      mutationKey: USER_QUERY_KEY.KAKAO_WITHDRAW(),
+      mutationKey: AUTH_MUTATION_KEY.KAKAO_WITHDRAW(),
       mutationFn: kakaoWithdraw,
     });
   },
-  PATCH_USER_PROFILE: () => {
-    return mutationOptions({
-      mutationKey: USER_MUTATION_KEY.USER_PROFILE(),
-      mutationFn: ({ body }: { body: UserProfileEditRequestBody }) =>
-        patchUserProfile(body),
-    });
-  },
 };
 
 // =============================================================================
 // MUTATION FUNCTIONS
 // =============================================================================
 
+export const patchUserProfile = async (data: UserProfileEditRequestBody) => {
+  const response = await api
+    .patch(END_POINT.USER.PATCH_USER_INFO, { json: data })
+    .json<UserProfileEditResponse>();
+  return response;
+};
+
 export const kakaoLogout = async (redirectUrl: string) => {
   const response = await api
     .post(`${END_POINT.AUTH.KAKAO_LOGOUT}?redirect-url=${redirectUrl}`)
@@ -124,10 +117,3 @@ export const kakaoWithdraw = async () => {
     .json<KakaoWithdrawResponse>();
   return response;
 };
-
-export const patchUserProfile = async (data: UserProfileEditRequestBody) => {
-  const response = await api
-    .patch(END_POINT.USER.PATCH_USER_INFO, { json: data })
-    .json<UserProfileEditResponse>();
-  return response;
-};

apps/client/src/shared/api/domain/onboarding/queries.ts

@@ -10,16 +10,9 @@ import {
   UserInfoOptions,
   UserInfoSubmitRequest,
   UserInfoSubmitResponse,
-  UserProfile,
 } from '@shared/api/types/types';
 
-export const USER_QUERY_OPTIONS = {
-  PROFILE: () => {
-    return queryOptions({
-      queryKey: USER_QUERY_KEY.PROFILE(),
-      queryFn: getUserProfile,
-    });
-  },
+export const INSURANCE_QUERY_OPTIONS = {
   JOBS: () => {
     return queryOptions({
       queryKey: USER_QUERY_KEY.JOBS(),
@@ -57,13 +50,6 @@ export const usePostUserInfo = (onSuccessCallback?: () => void) => {
   });
 };
 
-export const getUserProfile = async (): Promise<UserProfile | null> => {
-  const response = await api
-    .get(END_POINT.USER.GET_USER_INFO)
-    .json<UserProfile>();
-  return response;
-};
-
 export const getUserInfoJobs = async (): Promise<UserInfoJobs | null> => {
   const response = await api
     .get(END_POINT.USER.GET_USER_INFO_JOBS)

apps/client/src/shared/api/domain/queries.ts

@@ -1,8 +1,34 @@
+import { queryOptions } from '@tanstack/react-query';
 import ky from '@toss/ky';
 
+import { USER_QUERY_KEY } from '@shared/api/keys/query-key';
+
 import { END_POINT } from '../config/end-point';
 import { api } from '../config/instance';
-import { ImageUploadResponse } from '../types/types';
+import { ImageUploadResponse, UserProfile } from '../types/types';
+
+// =============================================================================
+// QUERY OPTIONS
+// =============================================================================
+
+export const USER_QUERY_OPTIONS = {
+  PROFILE: () =>
+    queryOptions({
+      queryKey: USER_QUERY_KEY.PROFILE(),
+      queryFn: getUserProfile,
+    }),
+};
+
+// =============================================================================
+// QUERY FUNCTIONS
+// =============================================================================
+
+export const getUserProfile = async (): Promise<UserProfile | null> => {
+  const response = await api
+    .get(END_POINT.USER.GET_USER_INFO)
+    .json<UserProfile>();
+  return response;
+};
 
 // =============================================================================
 // MUTATION FUNCTIONS

apps/client/src/shared/api/domain/report/queries.ts

@@ -2,10 +2,7 @@ import { queryOptions } from '@tanstack/react-query';
 
 import { END_POINT } from '@shared/api/config/end-point';
 import { api } from '@shared/api/config/instance';
-import {
-  INSURANCE_QUERY_KEY,
-  USER_QUERY_KEY,
-} from '@shared/api/keys/query-key';
+import { INSURANCE_QUERY_KEY } from '@shared/api/keys/query-key';
 import {
   InsuranceIpwonReport,
   InsuranceJanghaeReport,
@@ -14,7 +11,6 @@ import {
   InsuranceSamangReport,
   InsuranceSummary,
   InsuranceSusulReport,
-  UserProfile,
 } from '@shared/api/types/types';
 
 export const INSURANCE_QUERY_OPTIONS = {
@@ -63,15 +59,6 @@ export const INSURANCE_QUERY_OPTIONS = {
   },
 };
 
-export const USER_QUERY_OPTIONS = {
-  PROFILE: () => {
-    return queryOptions({
-      queryKey: USER_QUERY_KEY.PROFILE(),
-      queryFn: getUserProfile,
-    });
-  },
-};
-
 export const getInsuranceReport = async (
   reportId: string,
 ): Promise<InsuranceReport | null> => {
@@ -148,10 +135,3 @@ export const getInsuranceSamangReport = async (
     .json<InsuranceSamangReport>();
   return response;
 };
-
-export const getUserProfile = async (): Promise<UserProfile | null> => {
-  const response = await api
-    .get(END_POINT.USER.GET_USER_INFO)
-    .json<UserProfile>();
-  return response;
-};

apps/client/src/shared/api/keys/query-key.ts

@@ -19,8 +19,6 @@ export const USER_QUERY_KEY = {
   DISEASES: () => [...USER_QUERY_KEY.ALL, 'diseases'],
   COVERAGES: () => [...USER_QUERY_KEY.ALL, 'coverages'],
   OPTIONS: () => [...USER_QUERY_KEY.ALL, 'options'],
-  KAKAO_LOGOUT: () => [...USER_QUERY_KEY.ALL, 'kakao-logout'],
-  KAKAO_WITHDRAW: () => [...USER_QUERY_KEY.ALL, 'kakao-withdraw'],
 } as const;
 
 export const USER_MUTATION_KEY = {

apps/client/src/shared/router/routes/global-routes.tsx

@@ -1,4 +1,5 @@
 import CommunityEdit from '@pages/community/community-edit/community-edit';
+import { communityEditLoader } from '@pages/community/community-edit/loader';
 import CommunitySearch from '@pages/community/community-search/community-search';
 import SplashPage from '@pages/splash/splash-page.tsx';
 
@@ -47,6 +48,7 @@ export const protectedRoutes = [
   {
     path: routePath.COMMUNITY_EDIT,
     Component: CommunityEdit,
+    loader: communityEditLoader,
   },
   {
     path: routePath.COMMUNITY_SEARCH,