diff --git a/app/frontend/src/pages/Profile/MyProfile/index.css.ts b/app/frontend/src/pages/Profile/MyProfile/index.css.ts
new file mode 100644
index 00000000..8d460dd7
--- /dev/null
+++ b/app/frontend/src/pages/Profile/MyProfile/index.css.ts
@@ -0,0 +1,30 @@
+import { style } from '@vanilla-extract/css';
+
+import { vars } from '@/styles';
+import { sansRegular18 } from '@/styles/font.css';
+
+import * as parentStyle from '../index.css';
+
+export const logoutButton = style({
+ alignSelf: 'end',
+});
+
+export const userInfoBody = style([
+ sansRegular18,
+ {
+ display: 'flex',
+ flexDirection: 'column',
+ gap: '1.6rem',
+ },
+]);
+
+export const userInfoLine = style({
+ display: 'flex',
+ gap: '2.4rem',
+});
+
+export const userInfoLineTitle = style({
+ color: vars.color.grayscale200,
+});
+
+export const { section } = parentStyle;
diff --git a/app/frontend/src/pages/Profile/MyProfile/index.tsx b/app/frontend/src/pages/Profile/MyProfile/index.tsx
new file mode 100644
index 00000000..5e896d45
--- /dev/null
+++ b/app/frontend/src/pages/Profile/MyProfile/index.tsx
@@ -0,0 +1,54 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { Button, Error, Loading } from '@/components';
+import { useGetMyInfoQuery } from '@/queries/hooks';
+import { auth } from '@/services';
+import { sansBold36 } from '@/styles/font.css';
+
+import * as styles from './index.css';
+
+export function MyProfile() {
+ const { isLoading, data: currentUser } = useGetMyInfoQuery();
+ const { mutate: logout } = useMutation({
+ mutationFn: (providerId: string) => auth.logout({ providerId }),
+ });
+
+ if (isLoading) {
+ return ;
+ }
+
+ if (!currentUser) {
+ return ;
+ }
+
+ const { email, nickname } = currentUser;
+ const onLogout = () => {
+ logout(currentUser.providerId);
+ window.location.href = '/';
+ };
+
+ return (
+
+ 내 프로필
+
+
+ 이메일
+ {email}
+
+
+ 닉네임
+ {nickname}
+
+
+
+
+ );
+}
diff --git a/app/frontend/src/pages/Profile/index.css.ts b/app/frontend/src/pages/Profile/index.css.ts
index e5a70632..d7cc10f6 100644
--- a/app/frontend/src/pages/Profile/index.css.ts
+++ b/app/frontend/src/pages/Profile/index.css.ts
@@ -1,8 +1,5 @@
import { style } from '@vanilla-extract/css';
-import { vars } from '@/styles';
-import { sansRegular18 } from '@/styles/font.css';
-
export const container = style({
display: 'flex',
flexDirection: 'column',
@@ -19,30 +16,8 @@ export const list = style({
overflowY: 'auto',
});
-export const logoutButton = style({
- alignSelf: 'end',
-});
-
export const section = style({
display: 'flex',
flexDirection: 'column',
gap: '2.4rem',
});
-
-export const userInfoBody = style([
- sansRegular18,
- {
- display: 'flex',
- flexDirection: 'column',
- gap: '1.6rem',
- },
-]);
-
-export const userInfoLine = style({
- display: 'flex',
- gap: '2.4rem',
-});
-
-export const userInfoLineTitle = style({
- color: vars.color.grayscale200,
-});
diff --git a/app/frontend/src/pages/Profile/index.tsx b/app/frontend/src/pages/Profile/index.tsx
index 5c248d5b..d396f83c 100644
--- a/app/frontend/src/pages/Profile/index.tsx
+++ b/app/frontend/src/pages/Profile/index.tsx
@@ -1,33 +1,14 @@
-import { Button, Divider } from '@/components';
-import { sansBold24, sansBold36 } from '@/styles/font.css';
+import { Divider } from '@/components';
+import { sansBold24 } from '@/styles/font.css';
import * as styles from './index.css';
import { MyGroup } from './MyGroup';
+import { MyProfile } from './MyProfile';
export function ProfilePage() {
return (
-
- 내 프로필
-
-
- 이메일
- js43og@gmail.com
-
-
- 닉네임
- 지승
-
-
-
-
+
현재 참가한 모각코
diff --git a/app/frontend/src/services/auth.ts b/app/frontend/src/services/auth.ts
new file mode 100644
index 00000000..fc66ecfa
--- /dev/null
+++ b/app/frontend/src/services/auth.ts
@@ -0,0 +1,13 @@
+import { RequestLogoutUserDto } from '@morak/apitype';
+
+import { morakAPI } from './morakAPI';
+
+export const auth = {
+ endPoint: {
+ default: '/auth',
+ logout: '/auth/logout',
+ },
+
+ logout: async (data: RequestLogoutUserDto) =>
+ morakAPI.post(auth.endPoint.logout, data),
+};
diff --git a/app/frontend/src/services/index.ts b/app/frontend/src/services/index.ts
index 67ac8da4..2a4a8c65 100644
--- a/app/frontend/src/services/index.ts
+++ b/app/frontend/src/services/index.ts
@@ -1,3 +1,4 @@
+export * from './auth';
export * from './group';
export * from './member';
export * from './mogaco';