작업 과정
1. 로고 만들기
1-1. 로고 사이트 사용해서 로고 이미지 만들기
1-2. 로고 이미지를 AppBar 에 넣기
2. 다시하기 버튼 만들기
2-1. 다시하기 버튼 UI 만들기
2-2. 버튼 누르면 결과화면 없어지고 사진 올리는 화면 보여주기
과정 1. 로고 만들기
1-1. 로고 사이트 사용해서 로고 이미지 만들기
- wix.com 사용

1-2. 로고 이미지를 AppBar 에 넣기
- 관련 코드
const MyNavbar = () => {
return (
<Box
sx={{
flexGrow: 1,
}}
>
<AppBar elevation={0} sx={{ backgroundColor: 'transparent', border: '1px solid primary' }} position="static">
<Toolbar>
<Box component="div" sx={{
flexGrow: 1,
}}>
<img
alt="logo image" src="logo.png" height="50px"
/>
</Box>
<Button color="primary">Home</Button>
<Button color="primary">About</Button>
<Button color="primary">Contact</Button>
</Toolbar>
</AppBar>
</Box>
);
}
과정 2. 다시하기 버튼 만들기
2-1. 다시하기 버튼 UI 만들기
- 관련 코드
{hidden && (
<AgainButton
setHidden={setHidden}
setResult={setResult}
/>
)}
// 위 코드는 버튼 보여줄지 말지 정할 때
// 아래 코드는 버튼 UI
return (
<Box m={1}>
<Box component="button" onClick={replay}
sx={{
margin: '0 auto',
border: 'none',
display: 'flex',
justifyContent: 'center',
backgroundColor: 'transparent',
'&:hover': {
backgroundColor: 'primary.light',
opacity: [0.9, 0.9, 0.9],
},
}}
>
<ReplayIcon />
<Typography ml={1}>다시 하기</Typography>
</Box>
</Box>
);
2-2. 버튼 누르면 결과화면 없어지고 사진 올리는 화면 보여주기
- 관련 코드
const AgainButton = (props) => {
const navigate = useNavigate();
const replay = () => {
props.setHidden(false);
props.setResult([]);
navigate('/')
}
return (
// ...
}