Merge pull request #321 from js43o/get-user-profile

[Feat] 현재 로그인한 사용자 정보를 프로필에 표시, 로그아웃 버튼 구현

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;

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 <Loading />;
+  }
+
+  if (!currentUser) {
+    return <Error message="사용자 정보를 불러오지 못했습니다." />;
+  }
+
+  const { email, nickname } = currentUser;
+  const onLogout = () => {
+    logout(currentUser.providerId);
+    window.location.href = '/';
+  };
+
+  return (
+    <section className={styles.section}>
+      <div className={sansBold36}>내 프로필</div>
+      <div className={styles.userInfoBody}>
+        <div className={styles.userInfoLine}>
+          <span className={styles.userInfoLineTitle}>이메일</span>
+          <span>{email}</span>
+        </div>
+        <div className={styles.userInfoLine}>
+          <span className={styles.userInfoLineTitle}>닉네임</span>
+          <span>{nickname}</span>
+        </div>
+        <Button
+          theme="primary"
+          shape="text"
+          size="large"
+          className={styles.logoutButton}
+          onClick={onLogout}
+        >
+          로그아웃
+        </Button>
+      </div>
+    </section>
+  );
+}

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,
-});

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 (
     <div className={styles.container}>
-      <section className={styles.section}>
-        <div className={sansBold36}>내 프로필</div>
-        <div className={styles.userInfoBody}>
-          <div className={styles.userInfoLine}>
-            <span className={styles.userInfoLineTitle}>이메일</span>
-            <span>[email protected]</span>
-          </div>
-          <div className={styles.userInfoLine}>
-            <span className={styles.userInfoLineTitle}>닉네임</span>
-            <span>지승</span>
-          </div>
-          <Button
-            theme="primary"
-            shape="text"
-            size="large"
-            className={styles.logoutButton}
-          >
-            로그아웃
-          </Button>
-        </div>
-      </section>
+      <MyProfile />
       <Divider />
       <section className={styles.section}>
         <div className={sansBold24}>현재 참가한 모각코</div>

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),
+};

app/frontend/src/services/index.ts

@@ -1,3 +1,4 @@
+export * from './auth';
 export * from './group';
 export * from './member';
 export * from './mogaco';