[항해99 15일차] 2022.03.21 TIL

<오늘 내가 할 일>

 

주특기 기본 개인 과제 시작 !

1. 메인 페이지, 평점 남기기 페이지 생성

2. 라우팅

3. 페이지간 이동

-선택한 페이지로 이동시키기

-남기기 버튼 클릭 시 이전 페이지로 이동

4. 4주차&5주차 강의 듣기 

 

음 일단 week-1이라는 프젝을 하나 만들어주었다.

그리고 

 

yarn add styled-components
yarn add react-router-dom@5.2.1

스타일 패키지, 라우터 패키지를 프젝에 설치해주었다.

 

yarn start !!!

 

막막하였다...........

어디서부터..짜야될지..하나도 모르는 상황이 발생..🤫🤭

예시 사이트를 봤는데.. 소스에서 답을 볼 수 있었다.

답보면서 그냥 배끼는 수준의 코드를 짜고 있다.

자괴감이 든다......

 

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from "react-router-dom"; //이거 안쓰면 app페이지 열었을때 오류남

ReactDOM.render(
  <BrowserRouter>//이거 안쓰면 app페이지 열었을때 오류남
    <App />
  </BrowserRouter>,//이거 안쓰면 app페이지 열었을때 오류남
  document.getElementById('root')
);


reportWebVitals();

App.js

import React from "react";
import { Route } from "react-router-dom";
//메인페이지 , 상세페이지 임포트
import Main from "./Main";
import Detail from "./Detail";

function App() {
  console.log('앱파일');
  
  return (
    <div className="App">
     <Route path ="/" exact>
        <Main />
     </Route>
     <Route path ="/detail/:week" exact>
        <Detail />
     </Route>
    </div>
  );
}

export default App;

Main.js 생성 !!!!

import React from "react";
import styled from "styled-components";
//페이지 이동하기 위해 임포트
import { useHistory } from "react-router-dom";

const Main = (props) => {
    const history = useHistory(); //페이지 이동하기 위해서 필요한 객체 선언
    const day = { 0: "일", 1: "월", 2: "화", 3: "수", 4: "목", 5: "금", 6: "토" }; //요일 딕셔너리형태로 선언
    //console.log(Object.keys(day).map((_d, idx) => day[_d]))

    //Object.keys() 메소드는 주어진 객체의 속성 이름들을 일반적인 반복문과 동일한 순서로 순회되는 열거할 수 있는 배열로 반환합니다.
    const week = Object.keys(day).map((_d, idx) => {
        let today = new Date().getDay(); //오늘 날짜 구하는 함수
        let d = today + parseInt(_d) > 6 ? today + parseInt(_d) - 7 : today + parseInt(_d);
        return day[d];
    });
    //console.log(week) 오늘의 요일 구하는 함수

    const rate = week.map((w, idx) => {
        return {
            day: w,
            rate:
                Math.floor(Math.random() * (Math.floor(5) - Math.ceil(1) + 1)) + Math.ceil(1),
        }
    })
    //console.log(rate) 평점 랜덤으로 뿌려주는 거


    return (
        <>
            <TxtBox>
                <H3Style>내 일주일은?🤪 </H3Style>
                {rate.map((w, idx) => {
                    return (
                        <WeekBox
                            key={`week_${idx}`}
                        >
                            <WeekFont>
                                {w.day}
                            </WeekFont>
                            {Array.from({ length: 5 }, (item, idx) => {
                                return (
                                    <div
                                        key={idx}
                                        style={{
                                            width: "25px",
                                            height: "25px",
                                            margin: "5px",
                                            backgroundColor: w.rate < idx ? "#ccc" : "#74E0B7",
                                        }}
                                    ></div>
                                );
                            })}{/* Array */}
                            <Gogo
                                onClick={() => {
                                history.push(`/detail/${w.day}`);
                            }}>
                                Go ▶️
                            </Gogo>

                        </WeekBox>

                    )
                })}  {/* rate */}

            </TxtBox>





        </>
    );
};

const TxtBox = styled.div`
max-width: 350px;
min-height: 10vh;
height:90vh;
background-color: #fff;
padding: 16px;
margin: 20px auto;
border-radius: 5px;
border: 1px solid #ddd;
`;
const H3Style = styled.h3`
text-align:center;
`
const WeekBox = styled.div`
 display: flex;
 justify-content: center;
 align-items: center;
 margin: 1rem 0;
 width: 100%;
 background-color:#eee;
`
const WeekFont = styled.h4`
margin-right: 0.5rem;
`
const Gogo =styled.div`
margin-left: 5px;
cursor: pointer;
`
export default Main;

Detail.js

import React from "react";
import styled from "styled-components";
//페이지 이동하기 위해 임포트
import { useHistory,useParams } from "react-router-dom";

const Detail = (props) =>{
    const history = useHistory();
    const params = useParams();
    const [rate,setRate] =React.useState(0);

    React.useEffect(() => {
        const press = (e) =>{
            if([1,2,3,4,5].indexOf(parseInt(e.key)) !== -1){
                setRate(parseInt(e.key));
            }
        }
        window.addEventListener("keydown", press);
        return ()=> window.removeEventListener("keydown", press);
    },[]);



    return (
        <>
        <DetailBox>
            <Dtitle>
                <SpanDay>👻{params.week}요일👻</SpanDay>평점남기기
            </Dtitle>
            <RateDiv>
                {Array.from({ length: 5 }, (item, idx) => {
                                    return (
                                        <div
                                            key={idx}
                                            onClick={()=>{
                                                setRate(idx +1);
                                            }}
                                            style={{
                                                width: "25px",
                                                height: "25px",
                                                margin: "5px",
                                                backgroundColor: rate < idx + 1 ? "#ddd" : "#74E0B7"
                                            }}
                                        ></div>
                                    );
                                })}{/* Array */}
            </RateDiv>
            <button  onClick={() => {
            history.goBack();
            }}>
                평점 남기기🧚‍♀️
            </button>
        </DetailBox>

        </>
    )
};

const DetailBox =styled.div`
max-width: 350px;
min-height: 10vh;
height:40vh;
background-color: #fff;
padding: 16px;
margin: 20px auto;
border-radius: 5px;
border: 1px solid #ddd;
display:flex;
flex-direction:column;
gap:30px;

button{
    width:80%;
    margin: 10px auto;
    border:none;
    padding: 1rem;
    border-radius:8px;
    background-color:#74E0B7;
    font-weight:bold;
}
`
const Dtitle =styled.h3`
text-align:center;
`
const SpanDay =styled.span`
background-color: #C4FEC6;
color:#08A40E;
`
const RateDiv =styled.div`
display:flex;
justify-content:center;
align-items:center;
width:100%;
`


export default Detail;

이렇게까지 만들고..

깃허브에 커밋 푸쉬하려고 하니까 자꾸만 Git remote 에 인증 하지 못했습니다 이런..짱나는 에러메시지가 떴다.

vsc에서 하는 건 정말~~~~~이지 ~~~~어려웠다.

 

그래서 그냥 깃허브 데스크탑 깔고 커밋 푸쉬하니까 잘되었다. ! 해결 !!

한시간 정도 삽질한 느낌이다.

 

중요한 건 위 코드를 거의 ..배끼다싶이..작성한 것..

이해가 간 것은 스타일 패키지 이용하기랑 파람스 !! 히스토리 !!!

그래도 이해가 된 게 있어서 다행이다.

 

짜잔 Go를 누르면 평점남기기 페이지로 넘어간다 ....!!!!

 

 

<내일 내가 할 일>

 

1. 5주차 강의 또 듣기

2. 과제 배포하기