[ Feat ] setting 뷰 msw 연결

src/mocks/handlers.ts

@@ -1,3 +1,5 @@
+import { userProfileResolvers } from '@/mocks/modal/resolvers/settingModalResover';
+
 import { homeResolvers } from './home/resolvers/homeResolvers';
 
-export const handlers = [...homeResolvers];
+export const handlers = [...homeResolvers, ...userProfileResolvers];

src/mocks/modal/resolvers/settingModalResover.ts

@@ -0,0 +1,13 @@
+import { HttpResponse, http } from 'msw';
+
+import { SETTING_MODAL_RES } from '@/mocks/modal/responses/settingModalResponses';
+
+export const SETTING_MODAL_URL = {
+	GET_PROFILE_INFO: 'api/v2/profiles',
+};
+
+export const userProfileResolvers = [
+	http.get(SETTING_MODAL_URL.GET_PROFILE_INFO, async () => {
+		return HttpResponse.json(SETTING_MODAL_RES.GET_PROFILE_INFO);
+	}),
+];

src/mocks/modal/responses/settingModalResponses.ts

@@ -0,0 +1,20 @@
+export const SETTING_MODAL_RES = {
+	GET_PROFILE_INFO: {
+		status: 200,
+		message: '요청이 성공했습니다.',
+		data: {
+			id: '3',
+			name: '유영재',
+			email: '[email protected]',
+			imageUrl: '{profile image Url}',
+			isPushEnabled: true,
+		},
+	},
+};
+
+export const SETTING_MODIFY_RES = {
+	PUT_PROFILE: {
+		status: 200,
+		message: '요청이 성공했습니다.',
+	},
+};

src/shared/apisV2/modal/axios/index.ts

@@ -0,0 +1,8 @@
+import axios from 'axios';
+
+import { SETTING_MODAL_URL } from '@/mocks/modal/resolvers/settingModalResover';
+
+export const getUserProfile = async () => {
+	const { data } = await axios.get(SETTING_MODAL_URL.GET_PROFILE_INFO);
+	return data;
+};

src/shared/apisV2/modal/queries/index.ts

@@ -0,0 +1,18 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getUserProfile } from '@/shared/apisV2/modal/axios';
+
+export interface UserProfile {
+	id: string;
+	name: string;
+	email: string;
+	imageUrl: string;
+	isPushEnabled: boolean;
+}
+
+export const useGetUserProfile = () => {
+	return useQuery<UserProfile>({
+		queryKey: ['UserProfile'],
+		queryFn: () => getUserProfile(),
+	});
+};

src/shared/layout/Sidebar/ModalContentsSetting/AccountContent/AccountContent.tsx

@@ -8,8 +8,11 @@ import MailIcon from '@/shared/assets/svgs/mail.svg?react';
 import ButtonSettingSaved from '../ButtonSettingSaved/ButtonSettingSaved';
 
 interface User {
-	name: string;
-	email: string;
+	id: string | undefined;
+	name: string | undefined;
+	email: string | undefined;
+	imageUrl: string | undefined;
+	isPushEnabled: boolean | undefined;
 }
 
 interface AccountContentProps {

src/shared/layout/Sidebar/ModalContentsSetting/ModalContentsSetting.tsx

@@ -3,15 +3,29 @@ import { useState } from 'react';
 import SettingIcon from '@/shared/assets/svgs/setting.svg?react';
 import UserIcon from '@/shared/assets/svgs/user_circle.svg?react';
 
+import { useGetUserProfile } from '@/shared/apisV2/modal/queries';
+
 import AccountContent from './AccountContent/AccountContent';
 import Tabs from './Tabs/Tabs';
 import WorkSpaceSettingContent from './WorkspaceSettingContent/WorkspaceSettingContent';
 
 const ModalContentsSetting = () => {
 	const [activeTab, setActiveTab] = useState<string>('account');
-	const user = {
-		name: '홍길동',
-		email: '[email protected]',
+	const { data, isLoading, error } = useGetUserProfile();
+
+	if (isLoading) {
+		return <div>Loading...</div>;
+	}
+	if (error) {
+		return <div>Error loading user profile</div>;
+	}
+
+	const userProfiles = {
+		id: data?.id,
+		name: data?.name,
+		email: data?.email,
+		imageUrl: data?.imageUrl,
+		isPushEnabled: data?.isPushEnabled,
 	};
 
 	const personalWorkspaces = ['개인 프로젝트'];
@@ -42,7 +56,7 @@ const ModalContentsSetting = () => {
 
 			<div className="flex flex-col p-[4rem]">
 				{activeTab === 'account' ? (
-					<AccountContent user={user} />
+					<AccountContent user={userProfiles} />
 				) : (
 					<WorkSpaceSettingContent personalWorkspaces={personalWorkspaces} teamWorkspaces={teamWorkspaces} />
 				)}