0321_리액트로 1일 코스 페이지 만들기 3-장바구니 만들기

안녕하세요?

(작별 인사가 아닙니다. 잘못된 계획으로 인해 거의 모든 것을 다시 수행했을 것입니다)

개발에서 기획의 중요성을 배운 하루였습니다.

'추천 관련글,

방향이 정확히 정해진 게 아니라서 개발 내내 ‘아, 이거 뒤집어서 다시 해야 되는 거 아닌가?

강의에서 배운 내용은 장바구니에 담을 때 상품을 추가하는 방법입니다.

내가 해야 할 일: 또한 날짜와 인원수를 추가합니다….

초보 몬스터 잡기 튜토리얼을 하면서

빈 들판에 갑자기 나타난 보스몹을 잡아라! 기분이 이런가요?

물론 잘하면 잘 되겠죠? 그러나 저는 React를 처음 사용합니다 ///

오늘은 React를 통해 장바구니를 만들었습니다.

두렵지만……. 그래도 해보자

먼저 최근에 생성한 상세페이지를 조금 수정했습니다.

지난번에 비하면 조금 나아진 것 같지만…별로 나아진 것 같지는 않다. 왜??

첫째, 원데이 클래스의 주제에 따라 날짜와 인원을 선택할 수 있도록

양식으로 구성했습니다 (react-bootstarp 사용)

-> 선택한 코스의 날짜와 인원을 설정한 후 장바구니 버튼을 클릭하면 장바구니 페이지로 정보가 이동됩니다.

힘들어서 여기저기 많이 헤맸는데.. 계속 강의 들어와서 구글링 해보니..

저는 Redux를 처음 접하지만 만들면서 연습하고 있습니다.

Redux 설치 후

먼저 store.js 파일을 만듭니다.

카트가 비어 있어야 하므로 빈 배열을 만들었습니다.

이와 같이 코드를 작성하십시오.

이것은 detail.js 파일입니다.

양식에 날짜와 인원수를 구해야 했기 때문에

먼저 setPerson을 hadleDateChane에 넣었습니다.

날짜를 선택하고 인원수를 선택하자 갑자기 날짜가 사라졌다.

따로 하셔도 괜찮습니다.

<Form.Control
              type="date"
              value={date}
              onChange={handleDateChange}
              className="date"
              style={{ width: '300px' }}
            />
            <div className="pick_member">인원선택</div>
            <Form.Control
              type="number"
              min='0'
              value={person}
              onChange={handlePersonChange}
              className="member"
              style={{ width: '300px' }}
            />
            <div className="price">예약금액 1인 : {classdata.price}원</div>
            <Link
              onClick={() => {
                dispatch(
                  addItem({ id: classdata.id, date: date, person: person })
                );
                navigate('/Cart');
              }}
            >

이렇게 하면 값이 수신되어 setDate 및 setPerson에 삽입됩니다.

미들 디스패치를 사용하여 ID, 날짜 및 개인 값을 전달합니다.

설명하기 어렵다