본문 바로가기

개발 관련 기타/ML

[ML][React] 나는 솔로 테스트 - 출연하면 나의 이름은? AI 모델 teachable machine (로고 만들기, 다시하기 버튼) - Part 5

작업 과정

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 (
  // ...
}