리액트 3주차 개인과제 2022-01-23 진행상황

 

import { Route, Routes } from "react-router-dom";
import React from "react";

import MyWeek from "./myweek";
import MyDay from "./myday";
import styled from "styled-components";


function App() {

  const data = [
    {
      title: "월"
    },
    {
      title: "화"
    },
    {
      title: "수"
    },
    {
      title: "목"
    },
    {
      title: "금"
    },
    {
      title: "토"
    },
    {
      title: "일"
    },
    ];
  
  return (
    <div className="App">
      <Container>
        <Title>내 일주일은?</Title>
        <Line />

        <Routes>
          <Route path="/" element={<MyWeek data={data} />} />
          <Route path="/myday/:title" element={<MyDay data={data}/>} />
          </Routes>
      </Container>
    </div>
  );
}



const Container = styled.div`
  max-width: 350px;
  min-height: 60vh;
  background-color: #fff;
  padding: 16px;
  margin: 40px auto;
  border-radius: 5px;
  border: 1px solid #ddd;
  `;

const Title = styled.h1`
  color: slateblue;
  text-align: center;
  `;

const Line = styled.hr`
  margin: 16px 0px;
  border: 1px dotted #ddd;
  `;

export default App;

// 리액트 패키지를 불러옵니다.
import React from "react";
import styled from "styled-components";
import { useNavigate } from "react-router-dom";
// import { Link } from 'react-router-dom'
const MyWeek = ({data}) => {
let navigate = useNavigate();
    
  
    
        return (
        <ListStyle>
            {data.map((list, index) => {
                return (
                    <ItemStyle className="list_item" key={index}>
                        {list.title}
                        {/* <Link to={`/myday/${list.title}`}>보자보자</Link> */}
                        
                        <div onClick={() => {
                            navigate(`/myday/${list.title}`);

                            console.log(index)
                        }} 
                        
                        style={{
                            float: "right", width: "0px", height: "0px",
                            borderLeft: "30px solid #0931e3", borderTop: "15px solid transparent",
                            borderBottom: "15px solid transparent"
                        }}></div>
                       
                        <Circle/>
                        <Circle/>
                        <Circle/>
                        <Circle/>
                        <Circle/>
                    </ItemStyle>

                );
            })}
            

        </ListStyle>
    );
};
const Circle = styled.div`
    float: right;
    margin: auto 10px; 
    width: 30px;
    height: 30px;
    background: #666666;
    border-radius: 250px;
`;

const ListStyle = styled.div`
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    `;

const ItemStyle = styled.div`
    padding: 10px;
    margin: 8px;
    background-color: aliceblue;
    line-height: 30px
    `;

export default MyWeek;

// 리액트 패키지를 불러옵니다.
import React from 'react';
import styled from "styled-components";
import { useParams } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';

const MyDay = ({data}) => {
    
    
    const { title } = useParams()
    let navigate = useNavigate();

    const rate = React.useRef(null);
    const hoverEvent = () => {
        rate.current.style.background = "yellow"
    }

    React.useEffect(() => {
        rate.current.addEventListener("mouseover", hoverEvent);
        //컴포넌트 등록
    }, []);


    return (
        <Box>
           <Text>
                {data
                .filter((list) => list.title === title)
                .map((list, index) => (
                    <div key={index} className="day">
                        {list.title}요일 평점 남기기
                    </div>
                ))}                                              
                </Text>
            <ItemStyle>
                <Circle ref={rate} />
                <Circle />
                <Circle />
                <Circle />
                <Circle />
            </ItemStyle>
            <Button onClick={() => {
                navigate("/");
            }}>평점 남기기</Button>
        </Box>
    );
};

const Button = styled.button`
    color: white;
    display:block;
    margin: auto;
    font-size: middle;
    border-radius: 5px;
    background: gray;
    padding: 10px
`

const Text = styled.h3`
margin-left: 10px
`

const Box = styled.div`
margin: auto; 
width: 220px;
height: 220px;
background: #aaaaaa;
`;

const Circle = styled.div`
float: left;
margin: 7px; 
width: 30px;
height: 30px;
background: #666666;
border-radius: 250px;
`;


const ItemStyle = styled.div`
width: 100%;
margin-bottom:8vh;
`;

export default MyDay;