Feat[#228] : Header user data와 alarm data 조회 연결

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

src/apis/queryKeys.ts

@@ -29,4 +29,12 @@ export const QUERY_KEYS = {
       status,
     ],
   },
+
+  users: {
+    get: 'users',
+  },
+
+  myNotifications: {
+    get: 'alarms',
+  },
 };

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 (
     <>
       <div className={cx('container')}>
@@ -74,19 +92,28 @@ const Header = () => {
               <Menu />
             </div>
             <div className={cx('header-container-inner')}>
-              <Alarm
-                isActivated={isAlarmActivated}
-                isAlarmExisted={isAlarmExisted}
-                onClick={handleAlarmActivation}
-                alarmRef={alarmRef}
-              />
-              <HeaderProfile
-                nickname={nickname}
-                profileImageUrl={profileImageUrl}
-                isActivated={isHeaderProfileActivated}
-                onClick={handleHeaderProfileActivation}
-                headerProfileRef={headerProfileRef}
-              />
+              {accessToken && isUserDataSuccess ? (
+                <>
+                  <Alarm
+                    isActivated={isAlarmActivated}
+                    isAlarmExisted={isAlarmExisted}
+                    onClick={handleAlarmActivation}
+                    alarmRef={alarmRef}
+                  />
+                  <HeaderProfile
+                    nickname={nickname}
+                    profileImageUrl={profileImageUrl}
+                    isActivated={isHeaderProfileActivated}
+                    onClick={handleHeaderProfileActivation}
+                    headerProfileRef={headerProfileRef}
+                  />
+                </>
+              ) : (
+                <>
+                  <HeaderSigninButton />
+                  <HeaderSignupButton />
+                </>
+              )}
             </div>
           </div>
         </header>
@@ -98,9 +125,9 @@ const Header = () => {
         {isHeaderProfileActivated && (
           <div className={cx('header-user-menu')}>
             <UserMenu
-              profileImageUrl={profileImageUrl}
+              profileImageUrl={profileImageUrl || ''}
               nickname={nickname}
-              email={email}
+              email={email || ''}
               userMenuRef={userMenuRef}
               onClick={handleHeaderProfileActivation}
             />

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

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

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 (
+    <Link href={PAGE_PATHS.signin}>
+      <button className={cx('signin-btn')}>
+        <span className={cx('text')}>SIGNIN</span>
+      </button>
+    </Link>
+  );
+};

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 (
+    <Link href={PAGE_PATHS.signup}>
+      <button className={cx('signup-btn')}>
+        <div className={cx('text')}>SIGNUP</div>
+      </button>
+    </Link>
+  );
+};

src/components/layout/header/buttons/index.ts

@@ -0,0 +1,2 @@
+export * from './HeaderSigninButton';
+export * from './HeaderSignupButton';

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;

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;

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

src/types/users.ts

@@ -1,8 +1,8 @@
 export type ProfileImage = string | null;
 
-export type UserProfile = Pick<Users, 'email' | 'nickname' | 'profileImageUrl'>;
+export type UserProfile = Pick<UsersResponse, 'email' | 'nickname' | 'profileImageUrl'>;
 
-export type Users = {
+export type UsersResponse = {
   id: number;
   email: string;
   nickname: string;

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

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