Skip to content

Commit

Permalink
헤더에 프로필 구현 (#102)
Browse files Browse the repository at this point in the history
* refactor: 코드 순서 변경

#100

* feat: 헤더 프로필 구현

#100

* design: 로그인 상태일 때만 flex-end 적용

#100

* refactor: import 순서 변경

#100
  • Loading branch information
yeonddori authored Jul 20, 2024
1 parent 5f6ac74 commit ad9c226
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 9 deletions.
2 changes: 1 addition & 1 deletion src/app/newsletter/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,9 @@ const Page = () => {
const [selectedTab, setSelectedTab] = useState(articleCategory[0]);
const [articles, setArticles] = useState<Article[]>([]);
const [popularArticles, setPopularArticles] = useState<Article[]>([]);
const [userName, setUserName] = useState<string | null>(null);

const user = useGetUser();
const [userName, setUserName] = useState<string | null>(null);

useEffect(() => {
getArticleAll().then((res) => {
Expand Down
36 changes: 28 additions & 8 deletions src/components/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,20 @@

import { useState, useEffect } from 'react';

import { Button, Link, Stack, Typography, Box } from '@mui/material';
import { Avatar, Box, Button, Link, Stack, Typography } from '@mui/material';

import { getUser } from '@/app/api/user';
import { mainCategory } from '@/constants/category';
import color from '@/constants/color';
import useGetUser from '@/hooks/useGetUser';

const Header = () => {
const [show, setShow] = useState(true);
const [lastScrollY, setLastScrollY] = useState(0);

const user = useGetUser();
const [userProfile, setUserProfile] = useState<string | null>(null);

useEffect(() => {
const controlHeader = () => {
if (window.scrollY > lastScrollY) {
Expand All @@ -28,6 +33,18 @@ const Header = () => {
};
}, [lastScrollY]);

useEffect(() => {
if (user?.isLogin) {
getUser(user.token).then((res) => {
if (res.status) {
setUserProfile(res.data.profileImage);
} else {
throw res.message;
}
});
}
}, [user]);

return (
<>
<Box
Expand All @@ -47,7 +64,7 @@ const Header = () => {
경제를 단순하게
</Typography>
</Link>
<Stack alignItems="center" direction="row" mt={2} spacing={6}>
<Stack alignItems={userProfile ? 'flex-end' : 'center'} direction="row" mt={1} spacing={6}>
{mainCategory.map((item) => (
<Link
key={item.id}
Expand All @@ -64,12 +81,15 @@ const Header = () => {
{item.label}
</Link>
))}

<Link href="/login" underline="none">
<Button color="primary" sx={{ width: '100px' }} variant="outlined">
LOGIN
</Button>
</Link>
{userProfile ? (
<Avatar alt="profileImage" src={userProfile || ''} sx={{ width: 28, height: 28 }} />
) : (
<Link href="/login" underline="none">
<Button color="primary" sx={{ width: '100px' }} variant="outlined">
LOGIN
</Button>
</Link>
)}
</Stack>
</Stack>
</Box>
Expand Down

0 comments on commit ad9c226

Please sign in to comment.