내 차 만들기 로직

레이아웃 → 모델 선택 → 엔진 선택 → 바디 타입 선택 → 휠 타입 선택

레이아웃

1. 아래와 같은 형태로 데이터 생성함

const DEFAULT_STATE: MyCarType = {
  model: { title: 'Le Blanc', price: 0 },
  engine: { title: '', price: 0 },
  bodyType: { title: '', price: 0 },
  wheelDrive: { title: '', price: 0 },
  color: {
    outer: ['', ''],
    inner: ['', ''],
  },
  options: [],
};

이렇게 데이터 형태를 구성한 이유는 아래처럼 옵션별로 텍스트가 필요하고

마지막으로는 값을 보여줘야하는데 옵션별로 값을 저장하지 않고 totalPrice: 0 이렇게 설정해 버리면

옵션 바꿨을때나 다시 돌아왔을때 이전값을 또 계산해야하기 때문에 옵션 바꿀때 마다 price를 변경시키고

마지막에 전체 Price를 계산에서 보여주는 식으로 했음

// 색상이랑 옵션이 안되있기 때문에 일단 하나씩 했음
// 나중에 고칠 예정

const totalPrice = trim.model.price + trim.engine.price + trim.bodyType.price + trim.wheelDrive.price;

1. Paint 후에 useEffect 로 로컬 스토리지의 ‘carOptions’ 값을 꺼내와서 존재한다면 현재 옵션값을 업데이트해줌

   📌 만약 값이 없으면 아무것도 안함 (early return 해줬음)

   useEffect(() => {
       const localStorageData = localStorage.getItem('carOptions');
   
       if (localStorageData === null) {
         return;
       }
   
       const savedOptions: MyCarType = JSON.parse(localStorageData);
       setTrim(savedOptions);
     }, []);
   

👍🏽 정리해보면

위에서의 옵션값과 핸들러를 Outlet 의 context 로 내려줬기 때문에 페이지에서 이 값을 핸들링 해서 사용할 수 있음

<Outlet context={{ handleTrim, trim }} />

이렇게 하면 나갔다 들어와도 이전에 선택헀던 옵션들이 그대로 남게 할 수 있음!

페이지에서의 로직

ex) 엔진 선택 페이지

1. Layout에서 내려준 것들 받아옴