dh_demo

commit fd5785417466fb270d5231fc6649d05d4f0cabd1
parent 039c3b06106271da8d84bd8b3723ba1987fd7d65
Author: Yongbin Kim <iam@yongbin.kim>
Date:   Thu, 19 Jan 2023 12:19:55 +0900

feat: 헤더가 로그인 여부에 따라 다른 메뉴를 노출하도록 수정

Signed-off-by: Yongbin Kim <iam@yongbin.kim>

Diffstat:
M
components/contexts/TokenContext.tsx
 | 
6
+++++-
M
components/layout/Header.tsx
 | 
40
+++++++++++++++++++++++++++++++++++-----

2 files changed, 40 insertions(+), 6 deletions(-)
diff --git a/components/contexts/TokenContext.tsx b/components/contexts/TokenContext.tsx
@@ -79,7 +79,11 @@ export function TokenProvider ({ children }: { children: ReactNode }) {
 }
 
 export function useToken () {
-  return useContext(TokenContext)
+  const token = useContext(TokenContext)
+  if (token?.uid == null) {
+    return null
+  }
+  return token
 }
 
 export function useTokenRefreshTrigger () {
diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
@@ -1,19 +1,49 @@
+import { useToken } from '@/components/contexts/TokenContext'
 import Navbar from '@/components/layout/Navbar'
 import NavbarItem from '@/components/layout/NavbarItem'
-import { ApiError } from '@/lib/apierror'
 import classNames from '@/lib/classnames'
 import { UserProfile } from '@/lib/models/user_profile'
+import { useEffect, useState } from 'react'
 import styles from './Header.module.css'
 
 export default function Header () {
-  // 유저 정보
-  // const [userData, isUserDataLoading, , fetchUserData] = useApi<UserInfo | ApiError, void>(
+  const token = useToken()
+
+  const [userProfile, setUserProfile] = useState<UserProfile | null>(null)
+  useEffect(() => {
+    if (token == null) {
+      return
+    }
+
+    fetch('/api/users/me', {
+      headers: {
+        Authorization: `Bearer ${token}`
+      }
+    })
+      .then(response => response.json())
+      .then(data => {
+        setUserProfile(data)
+      })
+  }, [token])
 
   return (
     <header {...classNames(styles.header)}>
       <Navbar>
-        <NavbarItem href={'/users/login'}>Login</NavbarItem>
-        <NavbarItem href={'/users/signup'}>Sign up</NavbarItem>
+        {userProfile == null ? (
+          <>
+            <NavbarItem href={'/users/login'}>Login</NavbarItem>
+            <NavbarItem href={'/users/signup'}>Sign up</NavbarItem>
+          </>
+        ) : (
+          <>
+            <NavbarItem href={`/wiki/${userProfile.login_id}`}>
+              내 위키
+            </NavbarItem>
+            <NavbarItem href={`/users/${userProfile.login_id}`}>
+              {userProfile.nickname}
+            </NavbarItem>
+          </>
+        )}
       </Navbar>
     </header>
   )