From 8d718eb821761aa82f4943e82331baca1d010e8a Mon Sep 17 00:00:00 2001 From: SeieunYoo <101736358+SeieunYoo@users.noreply.github.com> Date: Sat, 24 Aug 2024 02:51:56 +0900 Subject: [PATCH] =?UTF-8?q?[Feature]=20=EB=A7=88=EC=9D=B4=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80,=20=EB=A1=9C=EA=B7=B8=EC=95=84=EC=9B=83=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84=20(#50)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 마이페이지, 로그아웃 구현 * chore: github-logo svg 이름 변경 * feat: 리뷰 반영 * feat: member api 추가 --- apps/client/apis/authApi.ts | 10 +++ apps/client/apis/membersApi.ts | 18 +++++ .../my-page/@modal/(.)logout/page.tsx | 65 +++++++++++++++++++ .../(afterLogin)/my-page/@modal/default.tsx | 5 ++ .../my-page/_components/MyInfoBox.tsx | 64 ++++++++++++++++++ .../app/(afterLogin)/my-page/default.tsx | 5 ++ .../app/(afterLogin)/my-page/layout.tsx | 16 +++++ .../app/(afterLogin)/my-page/logout/page.tsx | 8 +++ apps/client/app/(afterLogin)/my-page/page.tsx | 12 +++- .../app/(afterLogin)/study-apply/layout.tsx | 10 ++- .../auth/_components/LoginButton.tsx | 2 +- apps/client/constants/apiPath.ts | 4 ++ apps/client/constants/routePath.ts | 3 + apps/client/constants/tags.ts | 1 + .../public/images/github-logo-black.svg | 10 +++ ...{github-logo.svg => github-logo-white.svg} | 0 apps/client/types/dtos/members.ts | 3 + apps/client/types/entities/common/auth.ts | 4 ++ 18 files changed, 232 insertions(+), 8 deletions(-) create mode 100644 apps/client/apis/authApi.ts create mode 100644 apps/client/apis/membersApi.ts create mode 100644 apps/client/app/(afterLogin)/my-page/@modal/(.)logout/page.tsx create mode 100644 apps/client/app/(afterLogin)/my-page/@modal/default.tsx create mode 100644 apps/client/app/(afterLogin)/my-page/_components/MyInfoBox.tsx create mode 100644 apps/client/app/(afterLogin)/my-page/default.tsx create mode 100644 apps/client/app/(afterLogin)/my-page/layout.tsx create mode 100644 apps/client/app/(afterLogin)/my-page/logout/page.tsx create mode 100644 apps/client/public/images/github-logo-black.svg rename apps/client/public/images/{github-logo.svg => github-logo-white.svg} (100%) create mode 100644 apps/client/types/dtos/members.ts diff --git a/apps/client/apis/authApi.ts b/apps/client/apis/authApi.ts new file mode 100644 index 00000000..c7ea721e --- /dev/null +++ b/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 }; + }, +}; diff --git a/apps/client/apis/membersApi.ts b/apps/client/apis/membersApi.ts new file mode 100644 index 00000000..ff6c22ad --- /dev/null +++ b/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( + `${apiPath.members}/me/account-info`, + { + next: { tags: [tags.myAccountInfo] }, + cache: "force-cache", + } + ); + + return response.data; + }, +}; diff --git a/apps/client/app/(afterLogin)/my-page/@modal/(.)logout/page.tsx b/apps/client/app/(afterLogin)/my-page/@modal/(.)logout/page.tsx new file mode 100644 index 00000000..ff21deb8 --- /dev/null +++ b/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 ( + + + + 로그아웃 하시겠어요? + + + + + + + + + ); +}; + +export default LogoutModal; + +const headingStyle = css({ + color: "primary", +}); + +const containerStyle = css({ + width: "652px", +}); + +const buttonStyle = { + width: "173px", +}; diff --git a/apps/client/app/(afterLogin)/my-page/@modal/default.tsx b/apps/client/app/(afterLogin)/my-page/@modal/default.tsx new file mode 100644 index 00000000..395785b9 --- /dev/null +++ b/apps/client/app/(afterLogin)/my-page/@modal/default.tsx @@ -0,0 +1,5 @@ +const Default = () => { + return null; +}; + +export default Default; diff --git a/apps/client/app/(afterLogin)/my-page/_components/MyInfoBox.tsx b/apps/client/app/(afterLogin)/my-page/_components/MyInfoBox.tsx new file mode 100644 index 00000000..deed82db --- /dev/null +++ b/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 ( + <> + + 계정 정보 + + + {name} 님 + @{githubHandle} + + + + + + + + + + + + + + + } + /> + + ); +}; diff --git a/apps/client/app/(afterLogin)/my-page/default.tsx b/apps/client/app/(afterLogin)/my-page/default.tsx new file mode 100644 index 00000000..395785b9 --- /dev/null +++ b/apps/client/app/(afterLogin)/my-page/default.tsx @@ -0,0 +1,5 @@ +const Default = () => { + return null; +}; + +export default Default; diff --git a/apps/client/app/(afterLogin)/my-page/layout.tsx b/apps/client/app/(afterLogin)/my-page/layout.tsx new file mode 100644 index 00000000..5f5c26be --- /dev/null +++ b/apps/client/app/(afterLogin)/my-page/layout.tsx @@ -0,0 +1,16 @@ +const Layout = ({ + children, + modal, +}: { + children: React.ReactNode; + modal: React.ReactNode; +}) => { + return ( +
+ {children} + {modal} +
+ ); +}; + +export default Layout; diff --git a/apps/client/app/(afterLogin)/my-page/logout/page.tsx b/apps/client/app/(afterLogin)/my-page/logout/page.tsx new file mode 100644 index 00000000..8c5edfdf --- /dev/null +++ b/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; diff --git a/apps/client/app/(afterLogin)/my-page/page.tsx b/apps/client/app/(afterLogin)/my-page/page.tsx index 706b6223..31d3d123 100644 --- a/apps/client/app/(afterLogin)/my-page/page.tsx +++ b/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
MyPage
; + return ( + <> + 마이 페이지 + + + + ); }; export default MyPage; diff --git a/apps/client/app/(afterLogin)/study-apply/layout.tsx b/apps/client/app/(afterLogin)/study-apply/layout.tsx index df47c7d9..5f5c26be 100644 --- a/apps/client/app/(afterLogin)/study-apply/layout.tsx +++ b/apps/client/app/(afterLogin)/study-apply/layout.tsx @@ -6,12 +6,10 @@ const Layout = ({ modal: React.ReactNode; }) => { return ( - <> -
- {children} - {modal} -
- +
+ {children} + {modal} +
); }; diff --git a/apps/client/app/(beforeLogin)/auth/_components/LoginButton.tsx b/apps/client/app/(beforeLogin)/auth/_components/LoginButton.tsx index 8a6fd7ae..e15b5ead 100644 --- a/apps/client/app/(beforeLogin)/auth/_components/LoginButton.tsx +++ b/apps/client/app/(beforeLogin)/auth/_components/LoginButton.tsx @@ -30,7 +30,7 @@ const githubLogoIcon = ( github-logo ); diff --git a/apps/client/constants/apiPath.ts b/apps/client/constants/apiPath.ts index 37e58851..910d98ad 100644 --- a/apps/client/constants/apiPath.ts +++ b/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", } diff --git a/apps/client/constants/routePath.ts b/apps/client/constants/routePath.ts index c4217f62..f8c9509b 100644 --- a/apps/client/constants/routePath.ts +++ b/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; diff --git a/apps/client/constants/tags.ts b/apps/client/constants/tags.ts index 72356afb..1e9500a7 100644 --- a/apps/client/constants/tags.ts +++ b/apps/client/constants/tags.ts @@ -3,4 +3,5 @@ export const enum tags { studyApply = "studyApply", studyHistory = "studyHistory", studyDetailDashboard = "studyDetailDashboard", + myAccountInfo = "myAccountInfo", } diff --git a/apps/client/public/images/github-logo-black.svg b/apps/client/public/images/github-logo-black.svg new file mode 100644 index 00000000..7c3ddaf6 --- /dev/null +++ b/apps/client/public/images/github-logo-black.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/apps/client/public/images/github-logo.svg b/apps/client/public/images/github-logo-white.svg similarity index 100% rename from apps/client/public/images/github-logo.svg rename to apps/client/public/images/github-logo-white.svg diff --git a/apps/client/types/dtos/members.ts b/apps/client/types/dtos/members.ts new file mode 100644 index 00000000..48c115a4 --- /dev/null +++ b/apps/client/types/dtos/members.ts @@ -0,0 +1,3 @@ +import type { MyInfoType } from "types/entities/common/auth"; + +export interface MyAccountInfoDto extends MyInfoType {} diff --git a/apps/client/types/entities/common/auth.ts b/apps/client/types/entities/common/auth.ts index a26a5338..4f7ef66f 100644 --- a/apps/client/types/entities/common/auth.ts +++ b/apps/client/types/entities/common/auth.ts @@ -1 +1,5 @@ export type StatusType = "UNSATISFIED" | "IN_PROGRESS" | "SATISFIED"; +export interface MyInfoType { + name: string; + githubHandle: string; +}