항해 99 - 2022.01.25.THE (선택한 요일 보여주기 & 평점 남기기)

이번 챕터 일정

• 01/21 (금) 21:00까지 : S.A 제출
• 01/25 (화) 20:00~ : React 학습 로드맵 세션
• 01/27 (목) 21:00까지 : 주특기 입문 주차 개인/팀 과제 제출 완료

오늘 내가 할 일

• 개인과제 기능 구현 하기 얼렁뚱땅이라도 좋아 되기만 하면 된단다 ✅
• 백준 알고리즘 문제 풀고 정리  
• cs 스터디 정리 ✅
• 노마드코더 state props 부분 듣기

개인과제 요구사항

0. 기본 디자인 틀 ✅

1.  평점은 1~5까지 숫자 중 랜덤 한 정수 ✅

2. 각 요일 옆  버튼 누르면 평점 남기기 페이지로 이동 ✅

3. 선택한 요일 보여주기 ✅

4. 평점 입력하기✅

5. 평점 남기기 버튼 누르면 이전 페이지로 이동 ✅

---

 

<선택한 요일 보여주기>

app.js

import Home from "./Home";		//임포트는 필수!
import Detail from "./Detail";

function App() {
  return (
    <Warp className="App">
    	//v6부터는 route의 사용법이 바뀜
        <Routes>
        	//path다음에 링크 주소 element다음에는 가야할 컴포넌트 적기 
          <Route path="/"  element={<Home/>} />
          // :week는 파라미터로 넘길 값을 표시!
          <Route path="/detail/:week" element={<Detail/>} />
        </Routes>
    </Warp>
  );
}

home.js

const Home = (props) => {
	//v6부터는 history대신에 useNavigate()함수를 사용 일단 함수를 사용할수있게 변수지정
    let navigate = useNavigate();
    //일단 일주일을 배열로 지정 
    const weeks =["월", "화", "수", "목", "금", "토", "일"];
    return (
    <div>
    {weeks.map ((week.index)=> {
    	<div>
        //
        <p>{week}</p>
   		// onclick에 지정하는데 그때 넘길 값을 ${}모양으로 넘긴다! 빽틱사용하는거 잊지말것!
        //이러면 url에 보면 값이 넘어갔을 것 
   		<button onClick={()=>{navigate(`/detail/${week}`)}}></button>
        </div>}
    </div>);
    }

 

detail.js

const Detail = (props) =>{
	//useParams()를 통해서 파라미터 가져오기, 형식은 이렇게!
    const { week } = useParams();
    return (
    <div>
    	//내려받은 파라미터 붙여넣기!
  		<h1>{week}요일</span> 평점 남기기</h1> 
    </div>

---

<평점 남기기(동그라미 모양)>

detail.js

const Detail = (props) =>{

function onclick(e){
		//event의 target의 id값을 변수에 지정 
        const index1 = e.target.id
        // 평점은 1~5점 사이니까 그에 맞는 반복문 실행
        for(let i =1; i<=5; i++){
        	// document.getElementById를 통해서 id값이 i인 태그를 전부 가져오게함 
            const temp = document.getElementById(i)
            //만약에 i값이 id값보다 작거나 같을때 
            if (i <= index1){
            	//test라는 css를 추가하고 (색을 칠하는 css를 따로 만들어놨음)
                temp.classList.add(styles.test);
            //만약에 i값이 id값보다 크면
            } else {
            	// 만약에 temp에 test css가 포함되어 있으면 즉 t면 (contains은 ()안에가 있는지 없는지 판별해줌, 있으면 t 없으면 f)
                if(temp.classList.contains(styles.test)){
                	//그 css를 제거해라!
                    temp.classList.remove(styles.test)
                }
            }
        }

    }
 
return ( 
	<div>
    // 클릭 함수를 onClick에 지정하기 (기본 css는 회색 동구라뮈
	<div onClick={onclick} id ="1" className={styles.circle}></div>
	<div onClick={onclick} id ="1" className={styles.circle}></div>
    <div onClick={onclick} id ="1" className={styles.circle}></div>
    <div onClick={onclick} id ="1" className={styles.circle}></div>
    <div onClick={onclick} id ="1" className={styles.circle}></div>
    </div> );
    
    }
    
export default Detail;

 

detail.css

.circle { // 기본 동구롸미
    width: 30px; 
    height: 30px; 
    border-radius: 30px; 
    margin: 5px; 
    background-color: #ddd;
}

.test{  //색이 변하는 동구롸미
    width: 30px; 
    height: 30px; 
    border-radius: 30px; 
    margin: 5px; 
    background-color: tomato;   
}

---

 

<평점은 1~5까지 숫자중 랜덤한 정수 >

home.js

const Home = (props) => {
    return (
    	<div>
        //Math.random()은 원래 0~1의 난수를 뽑아 내는데 
        //Math.random() * (max - min) + min의 형식으로 사용하면서 최소값과 최대값을 정할수 있음 
        //Math.floor를 통해서 소숫점 자리를 버리도록 함
        //Math.floor(Math.random() * (max - min) + min);
    	const randnum = Math.floor(Math.random()*5+0);
            <div>
            //랜덤 값을 넣어주기
            //여기서 포인트는 <태그를 styled로 해야 한다는 점> 
            // styled컴포넌트를 사용하게 되면 태그안에 붙는 것들은 전부 props로 처리가 되기때문이다 
            <Circle index = {1} random = {randnum}/> 
            <Circle index = {1} random = {randnum}/> 
            <Circle index = {1} random = {randnum}/> 
            <Circle index = {1} random = {randnum}/> 
            <Circle index = {1} random = {randnum}/> 
            </div>
        </div> );
        }
        
const Circle = styled.div`
  width: 30px; 
  height: 30px; 
  border-radius: 30px ; 
  margin: 5px; 
  //삼항연산자 사용 
  //만약에 index값 보다 random된 난수의 값이 작거나 같으면
  //색을 바꿔주고
  //아니면 색을 회색으로 바꿔라
  background-color: ${(props)=> props.index <= p.random ? "tomato" : "#ddd" }
`;