[Feature] 마이페이지, 로그아웃 구현 (#50)

* feat: 마이페이지, 로그아웃 구현

* chore: github-logo svg 이름 변경

* feat: 리뷰 반영

* feat: member api 추가

apps/client/apis/authApi.ts

@@ -0,0 +1,10 @@
+import { fetcher } from "@wow-class/utils";
+import { apiPath } from "constants/apiPath";
+
+export const authApi = {
+  logout: async () => {
+    const response = await fetcher.get(apiPath.logout);
+
+    return { success: response.ok };
+  },
+};

apps/client/apis/membersApi.ts

@@ -0,0 +1,18 @@
+import { fetcher } from "@wow-class/utils";
+import { apiPath } from "constants/apiPath";
+import { tags } from "constants/tags";
+import type { MyAccountInfoDto } from "types/dtos/members";
+
+export const membersApi = {
+  getMyAccountInfo: async () => {
+    const response = await fetcher.get<MyAccountInfoDto>(
+      `${apiPath.members}/me/account-info`,
+      {
+        next: { tags: [tags.myAccountInfo] },
+        cache: "force-cache",
+      }
+    );
+
+    return response.data;
+  },
+};

apps/client/app/(afterLogin)/my-page/@modal/(.)logout/page.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { css } from "@styled-system/css";
+import { Flex } from "@styled-system/jsx";
+import { Modal, Space, Text } from "@wow-class/ui";
+import { useModalRoute } from "@wow-class/ui/hooks";
+import { authApi } from "apis/authApi";
+import { routePath } from "constants/routePath";
+import { useRouter } from "next/navigation";
+import Button from "wowds-ui/Button";
+
+const LogoutModal = () => {
+  const router = useRouter();
+  const { closeModal } = useModalRoute();
+  const handleClickLogoutButton = async () => {
+    const response = await authApi.logout();
+    if (response.success) {
+      router.push(routePath["landing"]);
+    } else {
+      router.back();
+    }
+  };
+
+  return (
+    <Modal>
+      <Flex alignItems="center" className={containerStyle} direction="column">
+        <Text typo="h1">
+          <span className={headingStyle}>로그아웃</span> 하시겠어요?
+        </Text>
+        <Space height={26} />
+        <Flex gap="xs">
+          <Button
+            size="lg"
+            style={buttonStyle}
+            variant="outline"
+            onClick={closeModal}
+          >
+            취소
+          </Button>
+          <Button
+            size="lg"
+            style={buttonStyle}
+            onClick={handleClickLogoutButton}
+          >
+            로그아웃
+          </Button>
+        </Flex>
+      </Flex>
+    </Modal>
+  );
+};
+
+export default LogoutModal;
+
+const headingStyle = css({
+  color: "primary",
+});
+
+const containerStyle = css({
+  width: "652px",
+});
+
+const buttonStyle = {
+  width: "173px",
+};

apps/client/app/(afterLogin)/my-page/@modal/default.tsx

@@ -0,0 +1,5 @@
+const Default = () => {
+  return null;
+};
+
+export default Default;

apps/client/app/(afterLogin)/my-page/_components/MyInfoBox.tsx

@@ -0,0 +1,64 @@
+import { Flex } from "@styled-system/jsx";
+import { Space, Text } from "@wow-class/ui";
+import { membersApi } from "apis/membersApi";
+import { routePath } from "constants/routePath";
+import Image from "next/image";
+import Link from "next/link";
+import Box from "wowds-ui/Box";
+import Button from "wowds-ui/Button";
+import TextButton from "wowds-ui/TextButton";
+
+export const MyInfoBox = async () => {
+  const myInfo = await membersApi.getMyAccountInfo();
+
+  if (!myInfo) return;
+  const { name, githubHandle } = myInfo;
+
+  return (
+    <>
+      <Box
+        style={{ width: "424px" }}
+        text={
+          <>
+            <Text color="primary">계정 정보</Text>
+            <Space height={12} />
+            <Flex alignItems="end" gap="xs">
+              <Text typo="h1">{name} 님</Text>
+              <Text typo="body2">@{githubHandle}</Text>
+            </Flex>
+            <Space height={58} />
+            <Flex gap="xs">
+              <Link href={routePath["onboarding"]} target="_blank">
+                <Button size="sm" variant="outline">
+                  계정 정보
+                </Button>
+              </Link>
+              <Link
+                href={`${routePath["github"]}/${githubHandle}`}
+                target="_blank"
+              >
+                <Button
+                  size="sm"
+                  variant="outline"
+                  icon={
+                    <Image
+                      alt="github-logo"
+                      height={14}
+                      src="/images/github-logo-black.svg"
+                      width={14}
+                    />
+                  }
+                >
+                  나의 Github
+                </Button>
+              </Link>
+              <Link href={routePath["my-page-logout"]}>
+                <TextButton text="로그아웃" />
+              </Link>
+            </Flex>
+          </>
+        }
+      />
+    </>
+  );
+};

apps/client/app/(afterLogin)/my-page/default.tsx

@@ -0,0 +1,5 @@
+const Default = () => {
+  return null;
+};
+
+export default Default;

apps/client/app/(afterLogin)/my-page/layout.tsx

@@ -0,0 +1,16 @@
+const Layout = ({
+  children,
+  modal,
+}: {
+  children: React.ReactNode;
+  modal: React.ReactNode;
+}) => {
+  return (
+    <main>
+      {children}
+      {modal}
+    </main>
+  );
+};
+
+export default Layout;

apps/client/app/(afterLogin)/my-page/logout/page.tsx

@@ -0,0 +1,8 @@
+import { routePath } from "constants/routePath";
+import { redirect } from "next/navigation";
+
+const LogoutPage = () => {
+  return redirect(routePath["my-page"]);
+};
+
+export default LogoutPage;

apps/client/app/(afterLogin)/my-page/page.tsx

@@ -1,5 +1,15 @@
+import { Space, Text } from "@wow-class/ui";
+
+import { MyInfoBox } from "./_components/MyInfoBox";
+
 const MyPage = () => {
-  return <div>MyPage</div>;
+  return (
+    <>
+      <Text typo="h1">마이 페이지</Text>
+      <Space height={16} />
+      <MyInfoBox />
+    </>
+  );
 };
 
 export default MyPage;

apps/client/app/(afterLogin)/study-apply/layout.tsx

@@ -6,12 +6,10 @@ const Layout = ({
   modal: React.ReactNode;
 }) => {
   return (
-    <>
-      <main>
-        {children}
-        {modal}
-      </main>
-    </>
+    <main>
+      {children}
+      {modal}
+    </main>
   );
 };
 

apps/client/app/(beforeLogin)/auth/_components/LoginButton.tsx

@@ -30,7 +30,7 @@ const githubLogoIcon = (
   <Image
     alt="github-logo"
     height={18}
-    src="/images/github-logo.svg"
+    src="/images/github-logo-white.svg"
     width={18}
   />
 );

apps/client/constants/apiPath.ts

@@ -4,4 +4,8 @@ export const enum apiPath {
   applyStudy = "/studies/apply",
   studyHistory = "/study-history",
   studyDetail = "/study-details/assignments",
+
+  logout = "/auth/logout",
+
+  members = "/common/members",
 }

apps/client/constants/routePath.ts

@@ -11,5 +11,8 @@ export const routePath = {
   ["study-cancellation-modal"]: "/study-apply/study-cancellation",
   ["auth-error-during-recruitment"]: "/auth-error-during-recruitment",
   ["auth-error-after-recruitment"]: "/auth-error-after-recruitment",
+  ["my-page"]: "/my-page",
+  ["my-page-logout"]: "/my-page/logout",
   onboarding: "https://onboarding.gdschongik.com",
+  github: "https://github.com",
 } as const;

apps/client/constants/tags.ts

@@ -3,4 +3,5 @@ export const enum tags {
   studyApply = "studyApply",
   studyHistory = "studyHistory",
   studyDetailDashboard = "studyDetailDashboard",
+  myAccountInfo = "myAccountInfo",
 }

apps/client/types/dtos/members.ts

@@ -0,0 +1,3 @@
+import type { MyInfoType } from "types/entities/common/auth";
+
+export interface MyAccountInfoDto extends MyInfoType {}

apps/client/types/entities/common/auth.ts

@@ -1 +1,5 @@
 export type StatusType = "UNSATISFIED" | "IN_PROGRESS" | "SATISFIED";
+export interface MyInfoType {
+  name: string;
+  githubHandle: string;
+}