From 018d76c3a1741dd0bb414ad23c2f46033a20bc31 Mon Sep 17 00:00:00 2001 From: grapefruit13 Date: Fri, 29 Mar 2024 15:53:10 +0900 Subject: [PATCH 01/13] =?UTF-8?q?refactor:=20quantico=2014px=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/mixins/_text-style.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/styles/mixins/_text-style.scss b/src/styles/mixins/_text-style.scss index e11b024b..39137911 100644 --- a/src/styles/mixins/_text-style.scss +++ b/src/styles/mixins/_text-style.scss @@ -102,6 +102,13 @@ line-height: 1.4rem; } +@mixin quantico-14() { + @extend %quantico; + + font-size: $font-size-14; + line-height: 2.4rem; +} + @mixin quantico-16() { @extend %quantico; @@ -163,6 +170,10 @@ @include quantico-12; } + @if $size == 14 { + @include quantico-14; + } + @if $size == 16 { @include quantico-16; } From 4417d9649f3a597261b09691317f8db1bf52b5c0 Mon Sep 17 00:00:00 2001 From: grapefruit13 Date: Fri, 29 Mar 2024 15:55:14 +0900 Subject: [PATCH 02/13] =?UTF-8?q?feat:=20ssrInstance=20authorization=20hea?= =?UTF-8?q?der=20=EC=84=A4=EC=A0=95=ED=95=98=EB=8A=94=20=ED=95=A8=EC=88=98?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/checkAuth.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/utils/checkAuth.ts b/src/utils/checkAuth.ts index 4b60f8bd..e09d8fca 100644 --- a/src/utils/checkAuth.ts +++ b/src/utils/checkAuth.ts @@ -56,3 +56,15 @@ export const requiresLogin = async ( } } }; + +export const setAuthorization = (accessToken: string) => { + ssrInstance.interceptors.request.use( + (config) => { + config.headers['Authorization'] = `Bearer ${accessToken}`; + return config; + }, + (error) => { + Promise.reject(error); + }, + ); +}; From 31de599a73b1d59592342229eb6c4b752bb7ce1c Mon Sep 17 00:00:00 2001 From: grapefruit13 Date: Fri, 29 Mar 2024 15:56:29 +0900 Subject: [PATCH 03/13] =?UTF-8?q?feat:=20CSR=20=EC=BF=A0=ED=82=A4=EC=97=90?= =?UTF-8?q?=EC=84=9C=20=ED=86=A0=ED=81=B0=20=EA=B0=80=EC=A0=B8=EC=98=A4?= =?UTF-8?q?=EB=8A=94=20=ED=95=A8=EC=88=98=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/cookieUtils.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/utils/cookieUtils.ts b/src/utils/cookieUtils.ts index 2f22b8cb..b7c5520e 100644 --- a/src/utils/cookieUtils.ts +++ b/src/utils/cookieUtils.ts @@ -25,3 +25,10 @@ export const getAuthCookie = (context: GetServerSidePropsContext) => { const refreshToken = cookies?.refreshToken; return { accessToken, refreshToken }; }; + +export const getCSRCookie = () => { + const cookies = parseCookies(); + const accessToken = cookies?.accessToken; + const refreshToken = cookies?.refreshToken; + return { accessToken, refreshToken }; +}; From f0602cb381e4743e10564d83f3f9757d6b7d8260 Mon Sep 17 00:00:00 2001 From: grapefruit13 Date: Fri, 29 Mar 2024 15:57:04 +0900 Subject: [PATCH 04/13] =?UTF-8?q?refactor:=20Users=20=ED=83=80=EC=9E=85?= =?UTF-8?q?=EB=AA=85=EC=9D=84=20UsersResponse=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/types/users.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/types/users.ts b/src/types/users.ts index c2fd5a3c..2297f132 100644 --- a/src/types/users.ts +++ b/src/types/users.ts @@ -1,8 +1,8 @@ export type ProfileImage = string | null; -export type UserProfile = Pick; +export type UserProfile = Pick; -export type Users = { +export type UsersResponse = { id: number; email: string; nickname: string; From bde84630e16b2b5f6d9c878c705a393bd55de755 Mon Sep 17 00:00:00 2001 From: grapefruit13 Date: Fri, 29 Mar 2024 15:59:14 +0900 Subject: [PATCH 05/13] =?UTF-8?q?feat:=20header=20api=20=ED=86=B5=EC=8B=A0?= =?UTF-8?q?=EC=97=90=20=ED=95=84=EC=9A=94=ED=95=9C=20=EC=BF=BC=EB=A6=AC?= =?UTF-8?q?=ED=82=A4=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/queryKeys.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/apis/queryKeys.ts b/src/apis/queryKeys.ts index b2f37ef0..78896376 100644 --- a/src/apis/queryKeys.ts +++ b/src/apis/queryKeys.ts @@ -29,4 +29,12 @@ export const QUERY_KEYS = { status, ], }, + + users: { + get: 'users', + }, + + myNotifications: { + get: 'alarms', + }, }; From 848890637a31d82655c93683869302f41dcd9fb6 Mon Sep 17 00:00:00 2001 From: grapefruit13 Date: Fri, 29 Mar 2024 16:00:14 +0900 Subject: [PATCH 06/13] =?UTF-8?q?feat:=20header=20api=20=ED=86=B5=EC=8B=A0?= =?UTF-8?q?=EC=97=90=20=ED=95=84=EC=9A=94=ED=95=9C=20=EC=BF=BC=EB=A6=AC=20?= =?UTF-8?q?function=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/queryFunctions.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/apis/queryFunctions.ts b/src/apis/queryFunctions.ts index 79da5a64..5ac7129c 100644 --- a/src/apis/queryFunctions.ts +++ b/src/apis/queryFunctions.ts @@ -12,6 +12,8 @@ import { } from '@/types'; import Activities from './activities'; +import { MyNotifications } from './myNotifications'; +import { Users } from './users'; export const getMyReservations = async () => { const response = await MyReservations.get(); @@ -72,3 +74,13 @@ export const editMyActivities = async (activityId: number, myActivities: MyActiv const response = await MyActivities.edit(activityId, myActivities); return response.status; }; + +export const getUser = async () => { + const response = await Users.get(); + return response.data; +}; + +export const getMyNotifications = async () => { + const response = await MyNotifications.get(); + return response.data; +}; From de6d59dc6ca5c18bcbe592e435f613676d93c8e3 Mon Sep 17 00:00:00 2001 From: grapefruit13 Date: Fri, 29 Mar 2024 16:01:24 +0900 Subject: [PATCH 07/13] =?UTF-8?q?feat:=20=EB=B9=84=EB=A1=9C=EA=B7=B8?= =?UTF-8?q?=EC=9D=B8=EC=8B=9C=20=ED=97=A4=EB=8D=94=EC=97=90=EC=84=9C=20?= =?UTF-8?q?=EB=B3=B4=EC=97=AC=EC=A3=BC=EB=8A=94=20=EB=A1=9C=EA=B7=B8?= =?UTF-8?q?=EC=9D=B8=20=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../buttons/HeaderSignButton.module.scss | 54 +++++++++++++++++++ .../header/buttons/HeaderSigninButton.tsx | 19 +++++++ .../header/buttons/HeaderSignupButton.tsx | 19 +++++++ 3 files changed, 92 insertions(+) create mode 100644 src/components/layout/header/buttons/HeaderSignButton.module.scss create mode 100644 src/components/layout/header/buttons/HeaderSigninButton.tsx create mode 100644 src/components/layout/header/buttons/HeaderSignupButton.tsx diff --git a/src/components/layout/header/buttons/HeaderSignButton.module.scss b/src/components/layout/header/buttons/HeaderSignButton.module.scss new file mode 100644 index 00000000..467787ca --- /dev/null +++ b/src/components/layout/header/buttons/HeaderSignButton.module.scss @@ -0,0 +1,54 @@ +%btn-base { + width: 8.8rem; + height: 4rem; + padding: 0.8rem; + + border-radius: 0.6rem; + + transition: $base-transition; +} + +%text-base { + display: block; + width: 7.2rem; +} + +.signin-btn { + @extend %btn-base; + + @include text-style-quantico(14, $white, bold, normal); + + background: $opacity-white-20; + + .text { + @extend %text-base; + + @include text-style-quantico(14, $white, bold, normal); + + @include responsive(PC) { + &:hover { + color: $primary; + } + } + + transition: $base-transition; + } +} + +.signup-btn { + @extend %btn-base; + + @include responsive(PC) { + &:hover { + border-color: $primary; + } + } + + border: 0.1rem solid $opacity-white-20; + + .text { + @extend %text-base; + + @include text-style-quantico(14, $white, bold, normal); + } +} diff --git a/src/components/layout/header/buttons/HeaderSigninButton.tsx b/src/components/layout/header/buttons/HeaderSigninButton.tsx new file mode 100644 index 00000000..f776e4e2 --- /dev/null +++ b/src/components/layout/header/buttons/HeaderSigninButton.tsx @@ -0,0 +1,19 @@ +import Link from 'next/link'; + +import classNames from 'classnames/bind'; + +import { PAGE_PATHS } from '@/constants'; + +import styles from './HeaderSignButton.module.scss'; + +const cx = classNames.bind(styles); + +export const HeaderSigninButton = () => { + return ( + + + + ); +}; diff --git a/src/components/layout/header/buttons/HeaderSignupButton.tsx b/src/components/layout/header/buttons/HeaderSignupButton.tsx new file mode 100644 index 00000000..702214b9 --- /dev/null +++ b/src/components/layout/header/buttons/HeaderSignupButton.tsx @@ -0,0 +1,19 @@ +import Link from 'next/link'; + +import classNames from 'classnames/bind'; + +import { PAGE_PATHS } from '@/constants'; + +import styles from './HeaderSignButton.module.scss'; + +const cx = classNames.bind(styles); + +export const HeaderSignupButton = () => { + return ( + + + + ); +}; From 9c25f0fdeb39058eb19113539a8fde25e4474f7e Mon Sep 17 00:00:00 2001 From: grapefruit13 Date: Fri, 29 Mar 2024 16:02:01 +0900 Subject: [PATCH 08/13] =?UTF-8?q?feat:=20=ED=97=A4=EB=8D=94=20=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=EC=9D=B8=20=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20export?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/layout/header/buttons/index.ts | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 src/components/layout/header/buttons/index.ts diff --git a/src/components/layout/header/buttons/index.ts b/src/components/layout/header/buttons/index.ts new file mode 100644 index 00000000..52799df7 --- /dev/null +++ b/src/components/layout/header/buttons/index.ts @@ -0,0 +1,2 @@ +export * from './HeaderSigninButton'; +export * from './HeaderSignupButton'; From 1ecfcc4c4dc1ca76690ca46e7de5d0c90dea2ea0 Mon Sep 17 00:00:00 2001 From: grapefruit13 Date: Fri, 29 Mar 2024 16:03:15 +0900 Subject: [PATCH 09/13] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EC=83=81=ED=83=9C=EC=9D=BC=20=EB=95=8C=EB=A7=8C=20user=20?= =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EA=B0=80=EC=A0=B8=EC=98=A4?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=BF=BC=EB=A6=AC=EB=A5=BC=20=EC=82=AC?= =?UTF-8?q?=EC=9A=A9=ED=95=9C=20useUserData=20=ED=9B=85=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useUserData.ts | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 src/hooks/useUserData.ts diff --git a/src/hooks/useUserData.ts b/src/hooks/useUserData.ts new file mode 100644 index 00000000..680f25cf --- /dev/null +++ b/src/hooks/useUserData.ts @@ -0,0 +1,20 @@ +import { useQuery } from '@tanstack/react-query'; + +import { getUser } from '@/apis/queryFunctions'; +import { QUERY_KEYS } from '@/apis/queryKeys'; + +const useUserData = (accessToken: string) => { + const { + data: userData, + isSuccess, + isError, + } = useQuery({ + queryKey: [QUERY_KEYS.users.get, accessToken], + queryFn: getUser, + enabled: !!accessToken, + }); + + return { userData, isSuccess, isError }; +}; + +export default useUserData; From 15c21443680c210b5df14a95edcc176e378770f4 Mon Sep 17 00:00:00 2001 From: grapefruit13 Date: Fri, 29 Mar 2024 16:03:46 +0900 Subject: [PATCH 10/13] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EC=83=81=ED=83=9C=EC=9D=BC=20=EB=95=8C=EB=A7=8C=20alarm=20?= =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EA=B0=80=EC=A0=B8=EC=98=A4?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=BF=BC=EB=A6=AC=EB=A5=BC=20=EC=82=AC?= =?UTF-8?q?=EC=9A=A9=ED=95=9C=20useAlarm=20=ED=9B=85=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useAlarmData.ts | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 src/hooks/useAlarmData.ts diff --git a/src/hooks/useAlarmData.ts b/src/hooks/useAlarmData.ts new file mode 100644 index 00000000..1aca4dda --- /dev/null +++ b/src/hooks/useAlarmData.ts @@ -0,0 +1,20 @@ +import { useQuery } from '@tanstack/react-query'; + +import { getMyNotifications } from '@/apis/queryFunctions'; +import { QUERY_KEYS } from '@/apis/queryKeys'; + +const useAlarmData = (accessToken: string) => { + const { + data: alarmData, + isSuccess, + isError, + } = useQuery({ + queryKey: [QUERY_KEYS.myNotifications.get], + queryFn: getMyNotifications, + enabled: !!accessToken, + }); + + return { alarmData, isSuccess, isError }; +}; + +export default useAlarmData; From 8fa7d3a686ad956d487303d824c17989a5101a40 Mon Sep 17 00:00:00 2001 From: grapefruit13 Date: Fri, 29 Mar 2024 16:05:33 +0900 Subject: [PATCH 11/13] =?UTF-8?q?feat:=20header=20user=20=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EC=A1=B0=ED=9A=8C,=20alarm=20=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EC=A1=B0=ED=9A=8C=20api=20=EC=97=B0?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/layout/header/Header/index.tsx | 63 +++++++++++++------ 1 file changed, 45 insertions(+), 18 deletions(-) diff --git a/src/components/layout/header/Header/index.tsx b/src/components/layout/header/Header/index.tsx index eb747c19..c2ee8005 100644 --- a/src/components/layout/header/Header/index.tsx +++ b/src/components/layout/header/Header/index.tsx @@ -6,16 +6,20 @@ import { useEffect, useState } from 'react'; import classNames from 'classnames/bind'; import { SVGS } from '@/constants'; +import { getCSRCookie } from '@/utils'; import Alarm from '@/components/layout/header/Alarm'; import AlarmList from '@/components/layout/header/AlarmList'; +import { HeaderSigninButton, HeaderSignupButton } from '@/components/layout/header/buttons'; import DrawerMenu from '@/components/layout/header/DrawerMenu'; import HeaderProfile from '@/components/layout/header/HeaderProfile'; import Menu from '@/components/layout/header/Menu'; import UserMenu from '@/components/layout/header/UserMenu'; -import { alarmData, USER_DATA } from '@/constants/mockData/headerMockData'; +import useAlarmData from '@/hooks/useAlarmData'; import { useDeviceType } from '@/hooks/useDeviceType'; import useTogglePopup from '@/hooks/useTogglePopup'; +import useUserData from '@/hooks/useUserData'; +import useUserStore from '@/stores/useUserStore'; import styles from './Header.module.scss'; @@ -52,13 +56,27 @@ const Header = () => { togglePopup: handleHeaderProfileActivation, } = useTogglePopup(); - const { email, nickname, profileImageUrl } = USER_DATA; - const { totalCount, notifications } = alarmData; + const { accessToken } = getCSRCookie(); + + const { alarmData } = useAlarmData(accessToken); + + const totalCount = alarmData?.totalCount; + const notifications = alarmData?.notifications; useEffect(() => { setIsAlarmExisted(totalCount > 0); }, [totalCount]); + const { userData, isSuccess: isUserDataSuccess } = useUserData(accessToken); + + if (isUserDataSuccess) { + useUserStore.setState({ user: userData.data }); + } + + if (!userData) return; + + const { email, nickname, profileImageUrl } = userData; + return ( <>
@@ -74,19 +92,28 @@ const Header = () => {
- - + {accessToken && isUserDataSuccess ? ( + <> + + + + ) : ( + <> + + + + )}
@@ -98,9 +125,9 @@ const Header = () => { {isHeaderProfileActivated && (
From 263365b365a5e9ee0a79c5506c92ba66e2b5468f Mon Sep 17 00:00:00 2001 From: grapefruit13 Date: Fri, 29 Mar 2024 16:19:58 +0900 Subject: [PATCH 12/13] =?UTF-8?q?refactor:=20headerprofile=20=EC=82=AC?= =?UTF-8?q?=EC=9A=A9=EC=9E=90=20=EC=9D=B4=EB=A6=84=20=ED=8F=B0=ED=8A=B8=20?= =?UTF-8?q?pretendard=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../layout/header/HeaderProfile/HeaderProfile.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/layout/header/HeaderProfile/HeaderProfile.module.scss b/src/components/layout/header/HeaderProfile/HeaderProfile.module.scss index c5d3b898..d07bf254 100644 --- a/src/components/layout/header/HeaderProfile/HeaderProfile.module.scss +++ b/src/components/layout/header/HeaderProfile/HeaderProfile.module.scss @@ -3,6 +3,6 @@ &-container-inner { @include flexbox($gap: 0.2rem); - @include text-style-quantico(16, $white, regular, normal); + @include text-style(16, $white); } } From 1285b0dd0bae54a9832e0ce36dfc275af3352ec1 Mon Sep 17 00:00:00 2001 From: grapefruit13 Date: Fri, 29 Mar 2024 17:11:43 +0900 Subject: [PATCH 13/13] =?UTF-8?q?refactor:=20early=20return=20=EB=AC=B8=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/layout/header/Header/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/layout/header/Header/index.tsx b/src/components/layout/header/Header/index.tsx index c2ee8005..7dbdbb28 100644 --- a/src/components/layout/header/Header/index.tsx +++ b/src/components/layout/header/Header/index.tsx @@ -73,9 +73,9 @@ const Header = () => { useUserStore.setState({ user: userData.data }); } - if (!userData) return; - - const { email, nickname, profileImageUrl } = userData; + const email = userData?.email; + const nickname = userData?.nickname; + const profileImageUrl = userData?.profileImageUrl; return ( <>