[리팩토링: 1차프로젝트] 상품디테일 페이지

완성도있는 프로젝트를 위해 기록한 리팩토링 로그

 

 

 

리팩토링을하면서 가장 오래걸렸던 페이지 중 하나였다. 

우선 상품리스트 페이지의 수정(오류)사항을 살펴보면

 

1. Mock data 하나로 합쳐서 수정 
2. 전체적인 UI 디테일 수정
2. Radio 버튼을 클릭했을때, 각 컬러값이 보이도록 수정
3. 화폐단위 디테일 문제
5. 버튼을 모두 선택했을때만 장바구니로 넘어가도록 'Alert 기능' 추가
6. Cart modal 창 추가
7. WomensDetail page 새로 만들기

 

 

📌프로젝트 시연 영상

 

 

Mock data 하나로 합쳐서 수정 

 

 

 

우선 detailColorList와 detatilSmallList로 나눠져있었던 목데이터를 하나로 합쳐주었고,

newDetail.json 파일을 만들어서 데이터파일 하나에서 값을 꺼내 올 수 있도록 바꿔주었다.

 

state를 활용해 데이터를 detailDate안에 저장한뒤,  findItem이라는 변수를 생성해

detailData -> product안에 id값을 찾아주어 상품 디테일 페이지에 데이터가 보일 수 있도록 만들어 주었다.

 

 

 

 Radio 버튼을 클릭했을때, 각 컬러값이 보이도록 수정

 

 

 

UI구조를 수정하면서 기존과 다르게

작은 컬러 옷을 클릭해도 라디오 버튼에 연결되서 색상 값이 보이고,

라디오 버튼을 클릭해도 알맞은 색상값이 보이게끔 만들고 싶었다.

 

우선 그렇게 수정하기위해, color값에 대한 상수데이터를 만들어주었고,

컬러 데이터를 맵을 사용해서 뿌려주었다.

 

✏️작성코드

<div className="colorWrap">
  {DETAIL_COLOR.map(({ id, color }) => {
    return (
      <div className="colorB" key={id}>
        <input
          type="radio"
          value={color}
          checked={clickColor === color}
          onChange={() => {
            setClickColor(color);
          }}
        />
        <label>{color}</label>
      </div>
    );
  })}
</div>

 

checked에 조건을 넣어서 클릭한 값만 체크되게끔 만들어준다.

이렇게하면 각각의 라디오버튼이 잘 클릭이되고 클릭 값에 따라 state가 저장되는것을 알 수 있다.

 

이번엔 라디오 버튼을 클릭하면 큰 옷 이미지가 알맞은 색상으로 보이게 만들어보자.

bigColorImg라는 객체를 만들어서 각각의 컬러 값에 목데이터의

thumbnail_url을 저장해준다. 

만들어놓은 bigColorImg는 이미지태그에 넣어주고, bigColorImg[clickColor]를 넣어서

clickColor가 변경될때마다 알맞은 객체에 접근해준다.

<img className="bigImg" src={bigColorImg[clickColor]} alt="니트" />

 

 

input태그에는 onChange 함수로 setter함수를 전달해주고,

라디오 버튼을 눌렀을때, color가 변경되면 setter함수가 실행되고

setter함수안에 들어있는 clickColor값이 변경될때, 

큰 이미지 태그인 <img className="bigImg" src={bigColorImg[clickColor]} alt="니트" />

여기로 값이 전달되고, 위에서 우리가 설정해놓은 bigColorImg 값들로 변경되는 것이다.

 

마지막으로 아래 작은 이미지를 눌렀을때도 큰 이미지의 컬러값이 바뀌어야하니

해당 이미지태그에서 onClick 함수로 setClickColor(color)를 똑같이 넣어주면 정상적으로 동작된다.

{findItem?.small_thumnail_image.map(
  ({ id, thumbnail_url, color }) => {
    return (
      <li
        className="smallImgLi"
        key={id}
        onClick={() => {
          setClickColor(color);
        }}
      >
        <img
          className="smallImg"
          src={thumbnail_url}
          alt="thumbnail"
        />
      </li>
    );
  }
)}

 

 

 

버튼을 모두 선택했을때만 장바구니로 넘어가도록 'Alert 기능'  추가

 

 

 

기존에는 컬러나, 사이즈를 수량을 선택하지않고, 장바구니를 누르면 바로 장바구니로 가게끔 되어 있었다.

이부분을 컬러,사이즈,수량중 하나라도 눌려있지않으면 alert을 띄워주고 넘어가지않게끔 수정해보았다.

 

✏️작성코드

 

장바구니로 컬러, 사이즈, 수량 데이터를 저장해서 cart page로 보내주기 위해

createCartItem이라는 함수를 만들어주었다. 

밑에 조건문을 추가하여 

컬러와, 사이즈가 둘다있으면 cart page로 데이터를 전달해주고

그게 아니라면 '옵션을 모두 선택해주세요.' 알럿메세지를 띄워주게끔 만들면 된다.

 

 

 

 

Cart modal 창 추가

 

 

  const [isOpenCartModal, setIsOpenCartModal] = useState(false);

부모컴포넌트에 모달창을 껐다켰다 하기위해 state를 하나 만들어준다.

만들어놓은 Cart modal 컴포넌트를 import  한뒤

openCartModal 함수를 만들고 

  const openCartModal = () => {
    setIsOpenCartModal(!isOpenCartModal);
  };

cart page로 전달할 데이터를 넣은 함수에 같이 넣어서 전달해주면 된다.

 

 

 

🛒완성