8강 챌린지

import styled from "styled-components";
import { motion, AnimatePresence } from "framer-motion";
import { useState } from "react";

const Wrapper = styled(motion.div)`
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  background: linear-gradient(135deg, rgb(238, 0, 153), rgb(221, 0, 238));
  
`;

const Grid = styled(motion.div)`
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 50vw;
  gap: 10px;
`;

const Box = styled(motion.div)`
  background-color: rgba(255, 255, 255, 1);
  height: 200px;
  border-radius: 40px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0, 0, 0, 0.06);
  display:flex;
  justify-content: center;
  align-items: center;
`;

const Overlay = styled(motion.div)`
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color:rgba(0, 0, 0, 0.5);
`;


const Circle = styled(motion.div)`
  background-color: #00a5ff;
  width: 70px;
  height: 70px;
  border-radius: 50px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0, 0, 0, 0.06);
`;

function App() {
  //const [id, setId] = useState<null | string>(null);
  const [click, setClick] = useState(false);
  const circleClick = () => (
    setClick((prev) => !prev)
  )
  const [overlay, setOverlay] = useState<null | boolean>(null);
  const overlayClick = () => {
    setOverlay((prev) => !prev)
  }
  
  
  return (
    <Wrapper>
      <Grid 
        onClick={overlayClick}
      >
        <AnimatePresence>
          <Box whileHover={{ scale: 1.1}}>{click ? <Circle layoutId="circle" /> : null}</Box>
          <Box whileHover={{ scale: 1.1}}></Box>
          <Box whileHover={{ scale: 1.1}}></Box>
          <Box whileHover={{ scale: 1.1}}>{!click ? <Circle layoutId="circle" /> : null}</Box>
        </AnimatePresence>
      </Grid>
      <AnimatePresence>
        {overlay? (<Overlay><Box onClick={() => setOverlay(false)} style={{ width: 200, height: 150}}/></Overlay>) : null}
      </AnimatePresence>
      <button onClick={circleClick}>Switch</button>
    </Wrapper>
  );
}

export default App;