포트폴리오 제작-슬라이더, 페이지전환 애니메이션

//projects.json
{
  "projects": [
    {
      "id": 0,
      "src": "/img/iphone-200521-195335.webp",
      "title": "지스트 청원서비스",
      "url": "https://www.gist-petition.com",
      "stacks": ["react", "typescript", "redux", "javascript"],
      "description": " 지스트 청원서비스는~
    },
   ...
}

//SliderItem
function SliderItem({ src, title, url, stacks, description, length }) {
  return (
    <SliderLayout width={`${100 / length}%`}>
      <SliderContainer>
        <PreviewBox>
          <img src={src} alt='project' />
        </PreviewBox>
        <TextBox>
          <h1>{title}</h1>
          <a href={url}>홈페이지: {url}</a>
          <IconList>
            <h3>Stack: </h3>
            {stacks.find((item) => item == 'javascript') && (
              <i className='fa-brands fa-square-js'></i>
            )}
            {stacks.find((item) => item == 'react') && (
              <i className='fa-brands fa-react'></i>
            )}
            {stacks.find((item) => item == 'redux') && <SiRedux />}
            {stacks.find((item) => item == 'typescript') && <SiTypescript />}
            {stacks.find((item) => item == 'firebase') && <SiFirebase />}
          </IconList>
          <pre>{description}</pre>
        </TextBox>
      </SliderContainer>
    </SliderLayout>
  );
}

export default SliderItem;

const SliderContainer = styled.div`
  width: ${props => props.length};
  height: 100%;
  transition: all 300ms ease;
  transform: ${props => `translateX(${props.showing * -props.unit}%)`};
  display: flex;
`

function Projects(props) {
  const [projects, setProjects] = useState([])
  const [showing, setShowing] = useState(0)
  useEffect(() => {
    setProjects(projectsJson.projects)
  }, [])
  const setNextItem = () => {
    setShowing(prev => (prev + 1 === projects.length ? prev : prev + 1))
  }
  const setPrevItem = () => {
    setShowing(prev => (prev - 1 < 0 ? 0 : prev - 1))
  }
  return (
    <ProjectsLayout>
      <Slider>
        {showing != 0 && (
          <LeftArr onClick={setPrevItem}>
            <i className="fa-solid fa-arrow-left"></i>
          </LeftArr>
        )}
        <SliderList>
          <SliderContainer
            showing={showing}
            unit={100 / projects.length}
            length={`${projects.length * 100}%`}
          >
            {projects &&
              projects.map(project => {
                return (
                  <SliderItem
                    key={project.title}
                    {...project}
                    length={projects.length}
                  ></SliderItem>
                )
              })}
          </SliderContainer>
        </SliderList>
        {showing !== projects.length - 1 && (
          <RightArr onClick={setNextItem}>
            <i className="fa-solid fa-arrow-right"></i>
          </RightArr>
        )}
      </Slider>
    </ProjectsLayout>
  )
}

export default Projects

<TypeIt
  getBeforeInit={instance => {
    instance
      .options({ speed: 80 })
      .type(`Hi, `)
      .pause(500)
      .type(`I'm <Strong>Youngjun Choi</strong>`)
      .pause(1000)
      .type(`, who is Front-end developer.`)
      .pause(2000)
      .delete(20, { speed: 500 })
      .pause(500)
      .type(`Coding the Dreams.`)
      .pause(1000)
      .type(`</br></br><span class="btn"> Please Click the button</span>`)
      .exec(() => {
        setTimeout(() => {
          setIsDone(true)
        }, 1000)
      })
    // Remember to return it!
    return instance
  }}
/>

const Button = styled(motion.button)`
  display: flex;
  justify-content: ${props => props.on};
  align-items: center;
`

function Home(props) {
  const [isDone, setIsDone] = useState(false)
  const [isOn, setIsOn] = useState(false)
  const navigate = useNavigate()
  const onClick = () => {
    setIsOn(true)
    setTimeout(() => {
      navigate("/main")
    }, 1500)
  }
  return (
    <HomeLayout
      variants={pageVariant}
      initial="invisible"
      animate="visible"
      exit="exit"
    >
      ...
      {isDone && (
        <Button on={isOn ? "flex-end" : "flex-start"} onClick={onClick}>
          <motion.div layout></motion.div>
        </Button>
      )}
    </HomeLayout>
  )
}

//app.jsx
function App() {
  return (
    <AnimatePresence>
      <Routes >
        <Route path='/' element={<Home></Home>}></Route>
        <Route path='/main' element={<Main></Main>}></Route>
      </Routes>
    </AnimatePresence>
  );
}

export default App;

//home.jsx

function Home(props) {
	...
  return (
    <HomeLayout
      variants={pageVariant}
      initial='invisible'
      animate='visible'
      exit='exit'
    >
    ...
    </HomeLayout>
  );
}

export default Home;

//main.jsx

function Main(props) {
	...
  return (
    <MainLayout
      variants={pageVariant}
      initial='invisible'
      animate='visible'
      exit='exit'
    >
    ...
    </MainLayout>
  );
}

export default Main;

function App() {
  const location = useLocation()
  return (
    <AnimatePresence>
      <Routes key={location.pathname} location={location}>
        <Route path="/" element={<Home></Home>}></Route>
        <Route path="/main" element={<Main></Main>}></Route>
      </Routes>
    </AnimatePresence>
  )
}

export default App