-
Notifications
You must be signed in to change notification settings - Fork 44
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[김미소] week14 #445
The head ref may contain hidden characters: "part3-\uAE40\uBBF8\uC18C-week14"
[김미소] week14 #445
Changes from 1 commit
d6de20f
569075d
97ad057
c28130d
2259ce3
3a2d697
9268e71
eba660c
bcc432c
248039b
8c0d0a9
0ab9e90
ff1514b
59de712
ba0dc40
bd9b2e6
184bce6
0453cae
61fd9d4
73d070d
87bd07a
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
- Loading branch information
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,13 +1,13 @@ | ||
import { useContext, useEffect, useState } from "react"; | ||
import { instance } from "@/lib/axios"; | ||
import { Email, HeaderControl, HeaderInner, HeaderLogo, HeaderUserInfo, HeaderWrap } from "./headerStyle"; | ||
import { joinInstance } from "@/lib/axios"; | ||
import { Email, HeaderControl, HeaderInner, HeaderLogo, HeaderWrap } from "./headerStyle"; | ||
import { useRouter } from "next/router"; | ||
import { Profile } from "@/styles/commonStyle"; | ||
import LinkButton from "./atoms/LinkButton"; | ||
import Link from "next/link"; | ||
import Image from "next/image"; | ||
import { LayoutContext } from "@/lib/LayoutContext"; | ||
import { pageLayoutConfig, urlName } from "@/src/constant/layoutConfig"; | ||
import Button from "./atoms/Button"; | ||
|
||
const logo = '/assets/logo/logo.svg'; | ||
|
||
|
@@ -20,36 +20,42 @@ export interface IHeaderUser { | |
auth_id:string | ||
} | ||
|
||
export interface IHeaderUserLoginInfoApi { | ||
userInfo?: { | ||
data: IHeaderUser[]; | ||
}; | ||
} | ||
|
||
export async function getStaticProps() { | ||
const res = await instance.get(``); | ||
const userInfo = res.data; | ||
|
||
return { | ||
props:{ | ||
userInfo, | ||
} | ||
} | ||
} | ||
|
||
function Header({userInfo}:IHeaderUserLoginInfoApi) { | ||
function Header() { | ||
const { pathname } = useRouter(); | ||
const results: urlName = pathname.split('/')[1]; | ||
const layoutConfig = pageLayoutConfig[results] || { header: true }; | ||
const {headerShow, setHeaderShow} = useContext(LayoutContext) | ||
const {headerShow, setHeaderShow, isLoggedIn, setIsLoggedIn} = useContext(LayoutContext) | ||
const [fixed, setFixed] = useState(true); | ||
const [userInfo, setUserInfo] = useState<IHeaderUser | null>(); | ||
|
||
const handleUserinfo = async () => { | ||
const res = await joinInstance.get(`/sample/user`); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 보통
|
||
setUserInfo(JSON.parse(JSON.stringify(res.data))); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 혹시
|
||
} | ||
|
||
const handleLogout = () => { | ||
localStorage.removeItem('linkbrary'); | ||
if(setIsLoggedIn) setIsLoggedIn(false); | ||
} | ||
|
||
useEffect(() => { // 유저정보 | ||
handleUserinfo(); | ||
if(setIsLoggedIn) { | ||
if(localStorage.getItem('linkbrary')){ | ||
setIsLoggedIn(true) | ||
} else { | ||
setIsLoggedIn(false) | ||
} | ||
} | ||
},[]) | ||
|
||
useEffect(() => { | ||
useEffect(() => { // 페이지 컴포넌트 유무 | ||
if (setHeaderShow) { | ||
setHeaderShow(layoutConfig.header); | ||
} | ||
}, [pathname]); | ||
|
||
if(!headerShow) return null; | ||
return ( | ||
<HeaderWrap className="head__wrap" $position={fixed}> | ||
|
@@ -60,11 +66,11 @@ function Header({userInfo}:IHeaderUserLoginInfoApi) { | |
</Link> | ||
</HeaderLogo> | ||
<HeaderControl className="head__login__box"> | ||
{userInfo ? ( | ||
<HeaderUserInfo> | ||
{isLoggedIn ? ( | ||
<Button onclick={handleLogout}> | ||
<Profile></Profile> | ||
<Email>{userInfo?.data[0].email}</Email> | ||
</HeaderUserInfo> | ||
<Email>{userInfo?.email}</Email> | ||
</Button> | ||
) : ( | ||
<LinkButton $link={'/login'} $linkClass={'link--gradient link--login large'}> | ||
로그인 | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
다음과 같이 구조분해할당을 할 수 있습니다 !